jQuery Grid

toggle filter of the jqxGrid.

by Robert Fossella

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<p>Error occurs when there are more than <b>8</b> columns. Less than 8 columns seems to work</p>
<p> To reproduce error</p>
<ul>
  <li>Click toggle filter row ON</li>
  <li>Immediately toggle filter row OFF</li>
  <li>Drag column to do Group On</li>
  <li>Grid displays incorrectly</li>
</ul>
<div>Total columns: <span id="numCols"></span></div>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Auto-Resize the columns" />
<button id="toggleFilter">Toggle Filter Row</button>

CSS

#jqxWidget {
   height: 100%;
}

JavaScript

var data = generatedata(10);
 var source = {
     localdata: data,
     datafields: [
     {
					name: 'currentState',
					type: 'string'
				},
     {
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     },
     {
         name: 'name1',
         type: 'string'
     },
     {
         name: 'name2',
         type: 'string'
     },
     {
         name: 'name3',
         type: 'string'
     },
     {
         name: 'name4',
         type: 'string'
     },
     
     {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };


 $('#jqxgrid').on('bindingcomplete', function (event) {
     
   let len = $('#jqxgrid').jqxGrid('columns').records.length;
 	 $('#numCols').text(len)
 });
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: '100%',
     height: '100%',
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     filterable: true,
     //showfilterrow: true,
     groupable: true,
     columnsresize: true,
     selectionmode: 'singlecell',
     columns: [
     {
					text: 'Current State',
					dataField: 'currentState',
					//cellclassname: cellclass,
					cellsrenderer: 
          function (row, columnfield, value) 
              {
                return '<div>' + 'xxx' + '</div>';
              },
          
					width: 40
				},
     
     {
         text: 'First Name',
         datafield: 'firstname',
         width: 40
     }, 
     {
         text: 'Last Name',
         datafield: 'lastname',
         width: 40
     }, 
     
     {
         text: 'Name1',
         datafield: 'name1',
         width: 40
     }, 
     {
         text: 'Name2',
         datafield: 'name2',
         width: 40
     }, 
     {
         text: 'Name3',
        ...