Html Grid

Bind to the bindingcomplete event by type: jqxGrid. Author: http://jqwidgets.com

by Hristo Hristov

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>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
    <br>
    <button id="change">Change</button>
</div>
<div id="log"></div>

CSS

.test {
  color: green;
}

JavaScript

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         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) {
      // correct the height of vertical text
      //$('#jqxgrid').find('.col-module .vertical').each(function() {
      //  var h = $(this).parent().height();
      //  if (h > 60) {
      //    $(this).css({height: h+'px', marginTop: h+'px'});
      //  }
      //});
   var gridCells = $('#jqxgrid').find('.jqx-grid-cell');
   //console.log(gridCells.length);
   console.log(type);
   var rows = $('#jqxgrid').jqxGrid('getrows');
   
   var rand = function () {
     return (Math.random() * gridCells.length / 3).toFixed(0);
   }
   
   var countCells = 15;
   var randArray = new Array(countCells);
   for (var i = 0; i < countCells; i += 1) {
     randArray[i] = rand();
   }
   
   console.log(randArray);
   
   for (var j = 0; j < countCells; j += 1) {
     var randCell = gridCells[randArray[j]];
     //randCell.style.color = 'red';
     randCell.classList.add("test");
     console.log(randCell);
   }
 });
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'singlecell',
     rendered: function (type) {
       var gridCells = $('#jqxgrid').find('.jqx-grid-cell');
       //console.log(gridCells.length);
       console.log(type);
       var rows = $('#jqxgrid').jqxGrid('getrows');
       
       var rand = function () {
         return (Math.random() * gridCells.length / 3).toFixed(0);
       }
       
       var countCells...