We Keep Coding

Get row as object where checkbox is checked in datatable

i'm using datatable library and trying to get the entire row as object where checkbox "editado" is checked
I'm using the folowing code:
var a = $('#ContratoAlertaTabela').DataTable().rows(function (idx,
data, node) {
return $(node).find('.editado:input[type="checkbox"]').prop('checked');
}).data().toArray();
But it gives as object like:
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
But i'm looking for this
0:
dataAssinatura: "2022-05-20T00:00:00"
dataTermino: "2022-05-13T00:00:00"
descricao: "Descrição 2021"
diasRestantes: -18
exercicio: 2021
fornecedor: "fornecedor 2"
id: 6
numero: "23452345"
tipo: "C"
visto: true
editado: true
And this is my datatable
var l = abp.localization.getResource('Contabilidade');
var dataTable = $('#ContratoAlertaTabela').DataTable(
abp.libs.datatables.normalizeConfiguration({
serverSide: true,
paging: true,
'order': [[2, 'asc']],
//order: false, //[[0, "asc"]],
searching: true,
scrollX: true,
ajax: abp.libs.datatables.createAjax(gcaspp.contabilidade.contratoAlerta.contratoAlerta.getListAlerta,
() => {
var visto = $("#ExibirVisto").is(":checked") ? "" : "true";
return { visto: visto };
}),
dom: '<"toolbar">',
columnDefs: [
{
title: 'Visto',
data: "visto",
orderable: false,
render: function (data) {
if (data) {
return '<input type="checkbox" name="cbox1" value="" checked>';
} else {
return '<input type="checkbox" name="cbox1" value="" >';
}
}
},
{
title: 'Editado',
render: function (data) {
return '<input type="checkbox" class="editado" name="teste" value="" >';
}
},
{
title: "visto",
data: "visto"
},
{
title: "id",
data: "id"
},
{
title: 'Tipo',
data: "tipo"
},
{
title: 'Numero',
data: "numero"
},
{
title: 'Exercicio',
data: "exercicio"
},
{
title: 'Descricao',
data: "descricao"
},
{
title: 'Fornecedor',
data: "fornecedor"
},
{
title: 'DataAssinatura',
data: "dataAssinatura"
},
{
title: 'DataTermino',
data: "dataTermino"
},
{
title: 'DiasRestantes',
data: "diasRestantes"
}
]
})
);
Any ideia about what i can do?

Show data to Ag Grid Vue

I am trying to load data into the VueJS table using the ag Grid vue plugin that I have in a template, I have tried several ways but I am not getting the result I am looking for ..., getting the following result:
{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123#gmail.com",
"created_at": null,
"updated_at": null
}
]
}
then I have my Vue view in this way, and sorry for including all the code, but since the template is working with everything that comes, I prefer to deliver all the detail, I have tried to make changes to the created method with axios, but I did not It works, unfortunately I can't load the data into the table, I hope you can guide me to fix my loading error.
<template>
<div id="page-user-list">
<!-- AgGrid Table -->
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="10"
v-model="currentPage" />
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue"
import '#sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'
import axios from 'axios'
// Store Module
//import moduleUserManagement from '#/store/user-management/moduleUserManagement.js'
// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"
export default {
components: {
AgGridVue,
vSelect,
// Cell Renderer
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
},
data() {
return {
// Filter Options
roleFilter: { label: 'Todos', value: 'all' },
roleOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Administador', value: 'admin' },
{ label: 'Usuario', value: 'user' },
{ label: 'Staff', value: 'staff' },
],
statusFilter: { label: 'Todos', value: 'all' },
statusOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Activo', value: 'active' },
{ label: 'Desactivado', value: 'deactivated' },
{ label: 'Bloqueado', value: 'blocked' },
],
isVerifiedFilter: { label: 'Todos', value: 'all' },
isVerifiedOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Si', value: 'yes' },
{ label: 'No', value: 'no' },
],
departmentFilter: { label: 'Todos', value: 'all' },
departmentOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Vendido', value: 'sales' },
{ label: 'Departamento', value: 'development' },
{ label: 'Administrado', value: 'management' },
],
searchQuery: "",
// AgGrid
gridApi: null,
gridOptions: {},
defaultColDef: {
sortable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
{headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
{headerName: 'Email', field: 'email', filter: true, width: 225 },
{headerName: 'Nombre', field: 'name', filter: true, width: 200 },
{headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
{headerName: 'Role', field: 'role_id', filter: true, width: 150},
{headerName: 'Acciones', width: 150, cellRendererFramework: 'CellRendererActions'},
],
// Cell Renderer Components
components: {
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
}
}
},
watch: {
roleFilter(obj) {
this.setColumnFilter("role", obj.value)
},
statusFilter(obj) {
this.setColumnFilter("status", obj.value)
},
isVerifiedFilter(obj) {
let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
this.setColumnFilter("is_verified", val)
},
departmentFilter(obj) {
this.setColumnFilter("department", obj.value)
},
},
computed: {
usersData() {
return this.users.data
},
paginationPageSize() {
if(this.gridApi) return this.gridApi.paginationGetPageSize()
else return 10
},
totalPages() {
if(this.gridApi) return this.gridApi.paginationGetTotalPages()
else return 0
},
currentPage: {
get() {
if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
else return 1
},
set(val) {
this.gridApi.paginationGoToPage(val - 1)
}
}
},
methods: {
setColumnFilter(column, val) {
const filter = this.gridApi.getFilterInstance(column)
let modelObj = null
if(val !== "all") {
modelObj = { type: "equals", filter: val }
}
filter.setModel(modelObj)
this.gridApi.onFilterChanged()
},
resetColFilters() {
// Reset Grid Filter
this.gridApi.setFilterModel(null)
this.gridApi.onFilterChanged()
// Reset Filter Options
this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }
this.$refs.filterCard.removeRefreshAnimation()
},
updateSearchQuery(val) {
this.gridApi.setQuickFilter(val)
}
},
created(){
//let users = /apps/user/user-list/
axios.get('api/users')
.then(res => {
let users = res.data.users;
})
}
}
</script>
<style lang="scss">
#page-user-list {
.user-list-filters {
.vs__actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-58%);
}
}
}
</style>

How do I make search input in kendo grid?

I am a new Software Developer. In my new company, I use their framework to code. And its using Kendo. I tried to make a search field for Kendo Grid so I can find a specific information in that grid. I tried this method but it doesn't work. Honestly, I don't understand how to use 'transport' things. I call an API to get datas for my grid and I call it in my grid's line of code.
{
type: 'panel',
fields: [{
type: 'panel',
text: 'Payment List',
name: 'payment',
fields: [{
type: 'grid',
name: 'paymentGrid',
data: [],
toolbar: function () {
return `<div class="toolbar" style="width:370px">
<label class="search-label" for="search-reservation" style="color:white"> Cari berdasarkan No. Pesanan: </label>
<input type="search" id="search-reservation" class="search-class">
</div>`
},
sourceOptions: {
pageSize: 10
},
options: {
selectable: true,
autoheight: true,
allowCopy: true,
altrows: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: [10, 20, 50, 100]
},
dataBinding: function () {
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
}
},
url: function (option) {
var arg = option.data
$.ajax({
method: 'POST',
url: APILink,
data: JSON.stringify(arg),
dataType: 'json',
contentType: 'application/json',
}).done(function (resp) {
if (resp.data != null) {
var nameMap = [];
$.each(resp.data, function (key, val) {
nameMap.push({
id: val.id,
supplier: val.supplier,
reservation_id: val.reservation_id,
currentPayment: val.state
});
});
option.success({
data: nameArray,
total: resp.total
});
}
}).fail(function (jqXHR, status, err) {
option.error(err);
});
},
fields: [{
name: 'number',
text: 'No. ',
template: "#= ++record #",
width: 70,
}, {
name: 'supplier',
text: 'Supplier',
}, {
name: 'reservation_id',
text: 'No. Reservation',
}, {
name: 'currentPayment',
text: 'status',
}, {
name: 'checked',
text: 'choose',
width: 100,
template: function (item) {
return !!item.checked
? `<input id="${item.id}" name='ceklis-boks[]' class="check" checked value="${item.id}" type=\'checkbox\' />`
: `<input id="${item.id}" name='ceklis-boks[]' class="check" value="${item.id}" type=\'checkbox\' />`
}
}],
onDataBound: 'dataBound',
}]
}
Then I used the same code as I mention before in previous link, and replace the ID (#) in that code with mine. But, it won't work. I come to his fiddle and I thought it was because his PlainDs variable and $("#category").kendoAutoComplete({...}) or serverPaging, serverSorting, or serverFiltering. So, I comment all of it here and still working properly. So basically, I can just write the code from line 49 - 81 like in his post. But why it doesn't work? For your information, I call the grid with its name or sometimes I give it a class. But it won't work. Is it a problem if I use class or name instead of ID?

The term "Not working" is too broad here, if you can be more specific on what is not working, we may be able to pinpoint better. However I assume you know how to get the grid to display and so on. so basically to get the search to work I usually have this in the click event of my "Search" button:
var grid = $("#myGrid").data("kendoGrid");
var ds = grid.dataSource;
var searchVal = $("#search-reservation").val();
if ( searchVal ) {
ds.filter({
field: "reservation_id", operator: "eq", value: searchVal
});
}
else {
ds.filter({});
}

How to use Angular ui-grid with array of string

I have used Angular ui-grid to represent an array of json objects from response. However, my current use case returns an array of string values in the response. In such as case, how should the grid be configured?
$http.get(url)
.success(function(data) {
if(data.length <= 0 && data != undefined) {
$scope.noDataGridEpr="Data is not Available";
console.log("Data is not Available");
}
console.log("Data is" + data);
$scope.prList = data;
console.log("prList is" + $scope.prList); //an array of strings
$scope.dataLoadedEpr=true;
return true;
})
.error(function(data, status) {
console.log("Error from controller. Could not query.");
return false;
})
This prints
prList is[A/DN,B/LCK,10,10,same,match,match],
[B/DN,D/LCK,10,10,same,mismatch,match],
[G/DN,D/LCK,10,10,same,mismatch,mismatch]
Here is how my current grid configuration looks
$scope.prGrid = {
data: 'prList',
columnDefs: [
{field: 'DPin', displayName: 'DPin', width: "5%"},
{field: 'CPin', displayName: 'CPin', width: "5%"},
{field: 'slack1', displayName: 'slack1', width: "5%"},
{field: 'slack2', displayName: 'slack2', width: "5%"},
{field: 'cComp', displayName: 'cComp', width: "10%"},
{field: 'dComp', displayName: 'dComp', width: "5%"},
{field: 'gComp', displayName: 'dComp', width: "5%"}
enableFiltering: true,
multiSelect: false,
enableGridMenu: true,
enableRowHeaderSelection: false,
enableSorting: true,
enableColumnResizing: true
};
I understand the field config above is incorrect. Given I have an array of string as i/p, can someone guide me on how to set the array of string in the grid, each representing a row?
Thanks.

Follow this->binding to 2D array
Example:Check this plnkr.
app.controller('TwoDimensionCtrl', ['$scope','$timeout','uiGridConstants', function ($scope,$timeout,uiGridConstants) {
$scope.data=[
["Cox", "Carney", "Enormo", true],
["Lorraine", "Carney", "Comveyer", false],
["Nancy", "Waters", "Fuelton", false]
];
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: "firstName", field: "0" },
{ name: "lastName", field: "1" },
{ name: "company", field: "2" },
{ name: "employed", field: "3" }
],
data : $scope.data
};
$timeout(function () {
$scope.data[0][0]="TestMod";
},5000);
}]);

Followed this ->I need to display an array of strings within ui-grid. Single column, one string per row
Tried this to create/set the json object thats consumed by ui-grid. This works.
$scope.prList = convertArrayOfStringsToGridFriendlyJSON(data);
function convertArrayOfStringsToGridFriendlyJSON(arr) {
var out = [];
arr.forEach(function(entry){
entry = entry.replace('[' , '')
entry = entry.replace(']' , '')
entry = entry.split(',')
var obj = {}; //json object
var DPin= "DPin"; //keys
var CPin= "CPin";
obj[DPin] = entry[0];
obj[CPin] = entry[1];
out.push(obj);
});
return out;
};

why I get error: http.get is not a function

I have this code:
(function () {
"use strict";
angular.module("workPlan").controller("workPlanListController", ["workPlans",
"clients",
"inspectionAuthority",
"$http",
"config",
"workPlanServise",
workPlanListController]);
function workPlanListController(workPlans,
clients,
inspectionAuthority,
workPlanServise,
config,
$http) {
var self = this;
this.workPlanList = workPlans;
this.lookups = {
client: clients,
authority: inspectionAuthority
};
this.gridOptions = {
expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
expandableRowHeight: 150,
enableColumnMenus: false,
enableSorting: true,
enableFiltering: false,
enableToopTip: true,
enableHorizontalScrollbar: 0,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [{ name: 'Authority', field: 'authName', cellTooltip: true },
{ name: '# Items, field: 'items2inspect', cellTooltip: true },
{ name: '% Inspected, field: 'percentage', cellTooltip: true }]
};
$http.get(config.baseUrl + "api/workPlan/").success(function (result) {
row.entity.subGridOptions.data = result.data;
});
}
});
}
}
this.gridOptions.columnDefs = [
{ name: 'client, field: 'clientName', cellTooltip: true, headerTooltip: true },
{ name: 'sites', field: 'siteNumbers', cellTooltip: true, headerTooltip: true },
{ name: 'checkedSites', field: 'siteNumbersInspected', cellTooltip: true, headerTooltip: true }];
this.gridOptions.data = self.workPlanList;
}
})();
When I try expand row I get on this row:
$http.get
Error : $http.get in not a function.
Any idea why I get error?

You shouldn't change the dependency sequence while using dependencies in the controller function.
Code
angular.module("workPlan").controller("workPlanListController", ["workPlans",
"clients",
"inspectionAuthority",
"$http",
"config",
"workPlanServise",
workPlanListController
]);
function workPlanListController(workPlans,
clients,
inspectionAuthority,
$http, //<-- $http should be here, instead of placing it at the end.
config,
workPlanServise
) {
Same SO Answer here