jQWidgets Forums

jQuery UI Widgets Forums Grid Custom Checkbox in jqxGrid column

This topic contains 7 replies, has 2 voices, and was last updated by  Sravanthi 9 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Custom Checkbox in jqxGrid column #72857

    Sravanthi
    Participant

    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.

    Custom Checkbox in jqxGrid column #72879

    ivailo
    Participant

    Hi phoebe,

    Send a fiddle or snipped with your code for better analyze.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Custom Checkbox in jqxGrid column #72904

    Sravanthi
    Participant

    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;
    	}
    	
    }
    Custom Checkbox in jqxGrid column #72907

    Sravanthi
    Participant

    Sorry,

    In the snippet I have included

    localdata: data

    But in my code it is url: url

    Still facing the problem.

    Custom Checkbox in jqxGrid column #72937

    ivailo
    Participant

    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 Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Custom Checkbox in jqxGrid column #72957

    Sravanthi
    Participant

    I have changed it. Still the same issue.

    Custom Checkbox in jqxGrid column #73001

    ivailo
    Participant

    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 Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Custom Checkbox in jqxGrid column #73147

    Sravanthi
    Participant

    Thanks ivailo,

    I overlooked the code. It worked for me.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.