Checkboxs on Columns

[pinhoMember]

Hello,

I really don’t know why, but when I load my Grid I keep see my checkboxs the way the image display:
http://s12.postimg.org/63zjj912h/img_1.jpg?noCache=1376061879

But I want to display them as value = false;

var source_loadAll =
            {
				datatype: "json",
				datafields: [
					{ name: 'id', type: 'int' },
					{ name: 'description', type: 'string' },
				],
				id: 'id',
				url: '../ajax/clients.php',
            };
$("#gridview").jqxGrid(
            {
                width: 1215,
                source: source_loadAll,
		editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: true,
                autoheight: true,
                columns: [
					{
				      text: '', menu: false, sortable: false, 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 = $("#gridview").jqxGrid('getpaginginformation');
                              var pagenum = pageinfo.pagenum;
                              var pagesize = pageinfo.pagesize;
                              if (checked == null || updatingCheckState) return;
                              $("#gridview").jqxGrid('beginupdate');
                              // select all rows when the column's checkbox is checked.
                              if (checked) {
                                  $("#gridview").jqxGrid('selectallrows');
                              }
                              // unselect all rows when the column's checkbox is checked.
                              else if (checked == false) {
                                  $("#gridview").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 = $("#gridview").jqxGrid('getrowboundindex', i);
                                  $("#gridview").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                              }
                              $("#gridview").jqxGrid('endupdate');
                          });
                          return true;
                      }
                  },
                  { text: 'description', datafield: 'description', width: 35, cellbeginedit: true, resizable: false },
                ],
 });
// select or unselect rows when a checkbox is checked or unchecked. 
             $("#gridview").on('cellvaluechanged', function (event) {
                 if (event.args.value) {
                     $("#gridview").jqxGrid('selectrow', event.args.rowindex);
                 }
                 else {
                     $("#gridview").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 = $("#gridview").jqxGrid('getdatainformation');
                     var pagesize = datainfo.paginginformation.pagesize;
                     var pagenum = datainfo.paginginformation.pagenum;
                     var selectedRows = $("#gridview").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;
                 }
             });

[Peter StoevKeymaster]

Hi pinho,

Your Checkbox column is unbound i.e its datafield is not set to a valid Data source column and that is the reason you experience that behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts