jqxgrid test

by roman2

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id="jqxgrid"></div>

JavaScript

var source = {
   datatype: "json",
   url: "dummy",
   sort: function(col, dir) {
     console.log("sort", col, dir);
     $("#jqxgrid").jqxGrid('updatebounddata', "sort");
   }
 };

 var adapter = new $.jqx.dataAdapter(source, {
   loadServerData: function(serverdata, source, callback) {
     setTimeout(function() {
       var cnt = serverdata.recordendindex - serverdata.recordstartindex + 1;
       var arr = [];
       arr.length = serverdata.recordstartindex;
       var data = generatedata(cnt);
       for (var i = 0, j = serverdata.recordstartindex; i < cnt; i++, j++) {
         data[i].id = j;
       }
       //console.log(serverdata, data);
       callback({
         records: arr.concat(data),
         totalrecords: 1000000
       });
     }, 500);
   }
 });
 var sorted = false;
 $('#jqxgrid').on('bindingcomplete', function() {
   if (!sorted) {
     $('#jqxgrid').jqxGrid('sortby', 'firstname', 'asc');
     sorted = true;
   }
 })
 $("#jqxgrid").jqxGrid({
   width: 500,
   source: adapter,
   columnsresize: true,
   sortable: true,
   virtualmode: true,
   pageable: false,
   sortable: true,
   rendergridrows: function(params) {
     return params.data;
   },
   columns: [{
     text: 'Id',
     datafield: 'id',
     width: 50
   }, {
     text: 'First Name',
     datafield: 'firstname',
     width: 90
   }, {
     text: 'Last Name',
     datafield: 'lastname',
     width: 90
   }, {
     text: 'Product',
     datafield: 'productname',
     width: 170
   }, {
     text: 'Quantity',
     datafield: 'quantity',
     width: 80,
     cellsalign: 'right'
   }]
 });