jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Custom Checkbox in jqxGrid column
Tagged: #customcheckbox, #json #angular, checkbox, grid
This topic contains 7 replies, has 2 voices, and was last updated by Sravanthi 9 years, 11 months ago.
-
Author
-
Hi,
I am trying to build a jqxGrid column which has selectall checkbox in the column header and the column type is checkbox. I am passing the json data through angularJS service. The data is displaying correctly, but when I select the selectall checkbox the rows are selecting(grayed out) but checkboxes in the row column are not being marked as checked.
I am following the fiddle file. http://jsfiddle.net/Dimitar_jQWidgets/axujkwrv/I am passing the angular service as url to retrieve data from the java controller.
Ex: var url = “getData”;Please help me.
Hi phoebe,
Send a fiddle or snipped with your code for better analyze.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comYeah, Here is the snippet of my code. I am passing the url as data, It is a angular service written to get data from java controller.
var url = "getData"; var source = { datatype: "json", datafields: [{ name: 'id', type: 'string' }, { name: 'type', type: 'string' }, { name: 'attr', type: 'string' }, { name: 'select_for_purge', type: 'bool' }], updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); }, localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); var columnCheckBox = null; var updatingCheckState = false; // initialize jqxGrid. Disable the built-in selection. $("#jqxgrid").jqxGrid({ source: dataAdapter, editable: true, theme: theme, enablehover: false, selectionmode: 'none', pageable: true, sortable: true, autoheight: true, width: "80%", columns: [ { text: '', menu: false, sortable: false, datafield: 'select', columntype: 'checkbox', width: "20%", renderer: function () { return '<div><div style="margin-left: 10px; margin-top: 5px;"></div><div>Select</div></div>'; }, rendered: function (element) { var checkbox = $(element).last(); $(checkbox).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 }); columnCheckBox = $(checkbox); $(checkbox).on('change', function (event) { var checked = event.args.checked; var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation'); var pagenum = pageinfo.pagenum; var pagesize = pageinfo.pagesize; if (checked == null || updatingCheckState) return; $("#jqxgrid").jqxGrid('beginupdate'); // select all rows when the column's checkbox is checked. if (checked) { $("#jqxgrid").jqxGrid('selectallrows'); } // unselect all rows when the column's checkbox is checked. else if (checked == false) { $("#jqxgrid").jqxGrid('clearselection'); } // update cells values. var startrow = pagenum * pagesize; for (var i = startrow; i < startrow + pagesize; i++) { // The bound index represents the row's unique index. // Ex: If you have rows A, B and C with bound indexes 0, // 1 and 2, afer sorting, the Grid will display C, B, A // i.e the C's bound index will be 2, but its visible // index will be 0. // The code below gets the bound index of the displayed // row and updates the value of the row's available // column. var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i); $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked); } $("#jqxgrid").jqxGrid('endupdate'); for (var i = 0; i < disabled.length; i++) { var row = disabled[i]; $("#jqxgrid").jqxGrid('setcellvalue', row, "available", false); $('#jqxgrid').jqxGrid('unselectrow', row); } }); return true; } }, { text: 'ID', editable: false, datafield: 'id', width: "15%" }, { text: 'Type', editable: false, datafield: 'type', width: "30%" }, { text: 'Attr', editable: false, datafield: 'attr', width: "35%" }] }); var updatePageState = function (pagenum) { var datainfo = $("#jqxgrid").jqxGrid('getdatainformation'); var pagenum = datainfo.paginginformation.pagenum; var pagesize = datainfo.paginginformation.pagesize; var startrow = pagenum * pagesize; // select the rows on the page. $("#jqxgrid").jqxGrid('beginupdate'); var checkedItemsCount = 0; for (var i = startrow; i < startrow + pagesize; i++) { var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i); var value = $("#jqxgrid").jqxGrid('getcellvalue', boundindex, 'available'); if (value) checkedItemsCount++; if (value) { $("#jqxgrid").jqxGrid('selectrow', boundindex); } else { $("#jqxgrid").jqxGrid('unselectrow', boundindex); } } $("#jqxgrid").jqxGrid('endupdate'); if (checkedItemsCount == pagesize) { columnCheckBox.jqxCheckBox({ checked: true }); } else if (checkedItemsCount == 0) { columnCheckBox.jqxCheckBox({ checked: false }); } else { columnCheckBox.jqxCheckBox({ checked: null }); } } // update the selection after sort. $("#jqxgrid").on('sort', function (event) { updatePageState(); }); // update the selection after page change. $("#jqxgrid").on('pagechanged', function (event) { updatePageState(); }); // select or unselect rows when a checkbox is checked or unchecked. $("#jqxgrid").on('cellvaluechanged', function (event) { if (event.args.value) { $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex); } else { $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex); } // update the state of the column's checkbox. When all checkboxes on the // displayed page are checked, we need to check column's checkbox. We // uncheck it, // when there are no checked checkboxes on the page and set it to // intederminate state when there is at least one checkbox checked on // the page. if (columnCheckBox) { var datainfo = $("#jqxgrid").jqxGrid('getdatainformation'); var pagesize = datainfo.paginginformation.pagesize; var pagenum = datainfo.paginginformation.pagenum; var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); var state = false; var count = 0; $.each(selectedRows, function () { if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) { count++; } }); if (count != 0) state = null; if (count == pagesize) state = true; if (count == 0) state = false; updatingCheckState = true; $(columnCheckBox).jqxCheckBox({ checked: state }); updatingCheckState = false; } });
The getData service is defined as follows:
angular.module('angularApp').factory('GetDataService', ['$http', '$log', function (http, log) { console.log("Using Services -> GetDataService"); return { getData: function () { return http.get('getData').success(function (data, status, headers, config) { return data; }).error(function (data, status, headers, config) { console.log("error in getData"); return JSON.stringify(status); }).then(function(result) { return result.data; }); } } }]);
The java controller has data in this form.
public class eRestService { @RequestMapping(value = "/getData") @ResponseBody public ArrayList<Map<String, Object>> getData() { ArrayList<Map<String, Object>> eData = new ArrayList<Map<String, Object>>(); Map<String, Object> Obj0 = new HashMap<String, Object>(); Obj0.put("id", "2"); Obj0.put("type", "xyz"); Obj0.put("attr", "34"); Obj0.put("select", "false"); eData.add(Obj0); return eData; } }
Sorry,
In the snippet I have included
localdata: data
But in my code it is
url: url
Still facing the problem.
Hi phoebe,
Try to use the same names about your select column. You are using select_for_purge and select about the same datafield.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comI have changed it. Still the same issue.
Hi phoebe,
In some functions you are still using the original column name from the example – ‘available’.
So the script is trying to manipulate missing element.
Change it to ‘select’ in the rows below and everything must work fine.$(“#jqxgrid”).jqxGrid(‘setcellvalue’, boundindex, ‘available’, event.args.checked);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “available”, false);
var value = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, boundindex, ‘available’);Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comThanks ivailo,
I overlooked the code. It worked for me.
-
AuthorPosts
You must be logged in to reply to this topic.