Reply To: Custom Checkbox in jqxGrid column

[SravanthiParticipant]

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;
	}
	
}