Rewrite checkbox!

[my_2000Participant]

If you use the example is OK, but I was obtained from the ajax data, I do not know how to write!

	var Datagrid_source = {
	  datatype: "json",
	  datafields: [
	    { name: 'id', type: 'int' },
	    { name: 'type', type: 'string' },
	    { name: 'operator', type: 'string' },
	    { name: 'modifyDate', type: 'string' }
	  ],
	  id: 'ID',
	  url: "getvalue.php",
	  type: "post",
	  root: 'Rows',
	  cache: false,
	  beforeprocessing: function (data) {
	    Datagrid_source.totalrecords = data[0].TotalRows;
	    for (var i = 0; i < data[0].Rows.length; i++) {
	      data[0].Rows[i]["available"]=false;
	    }
	  },
	  filter: function(){
	    $("#Datagrid").jqxGrid('updatebounddata', 'filter');
	  },
	  sort: function(){
	    $("#Datagrid").jqxGrid('updatebounddata', 'sort');
	  },
     };

     var dataAdapter = new $.jqx.dataAdapter(Datagrid_source);
     var columnCheckBox = null;
     var updatingCheckState = false;

     $("#Datagrid").jqxGrid({
	   width: '100%',
	   height:'100%',
	   source: dataAdapter,
	   sortable: true,
	   pageable: true,
	   scrollmode: 'deferred',
	   selectionmode: 'none',
	   columnsresize: true,
	   pagermode: 'simple',
           altrows: true,
	   virtualmode: true,
	   columns: [
	     {
	          text: '', menu: false, sortable: false,
	          datafield: 'available', columntype: 'checkbox', width: 40,
	          renderer: function () {
	              return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
	          },
	          rendered: function (element) {
	              $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
	              columnCheckBox = $(element);
	              $(element).on('change', function (event) {
	                  var checked = event.args.checked;
	                  var pageinfo = $("#Datagrid").jqxGrid('getpaginginformation');
	                  var pagenum = pageinfo.pagenum;
	                  var pagesize = pageinfo.pagesize;
	                  if (checked == null || updatingCheckState) return;
	                  	$("#Datagrid").jqxGrid('beginupdate');
	                  if (checked) {
	                      $("#Datagrid").jqxGrid('selectallrows');
	                  }
	                  else if (checked == false) {
	                      $("#Datagrid").jqxGrid('clearselection');
	                  }
	                  var startrow = pagenum * pagesize;
	                  for (var i = startrow; i < startrow + pagesize; i++) {
	                      var boundindex = $("#Datagrid").jqxGrid('getrowboundindex', i);
	                      $("#Datagrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
	                  }
	                  $("#Datagrid").jqxGrid('endupdate');
	              });
	              return true;
	          }
	     },
	     {text: 'ID', datafield: 'ID', hidden: true},
	     {text: 'modifyDate', datafield: 'modifyDate', width: '8%',minwidth: 100},
	     {text: 'type', datafield: 'type', width: '24%'},
	     {text: 'operator', datafield: 'operator'}
	   ],
	   rendergridrows: function (obj) {
	     return obj.data;
	   },
	});

[Peter StoevKeymaster]

Hi my_2000,

You build a custom element which you add to a column. If you want to update it somehow, then you will have to write additional logic for that part, too. At first, you can start with saving a reference to your custom element in a variable which you will create outside the Grid initialization code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[my_2000Participant]

Feel shy, can you give me an example, thank you!

[Author]

Posts