jQWidgets Forums
Forum Replies Created
-
Author
-
June 23, 2015 at 12:48 pm in reply to: Custom Checkbox in jqxGrid column Custom Checkbox in jqxGrid column #72904
Yeah, 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; } }
-
AuthorPosts