jqxGrid virtual

by ajcsoft

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
Click the scroll bar to scroll down a whole page.
The second page is only half drawn and it looks like the records have been put in
too high up
<div id="gridMain"></div>

JavaScript

let dsMain =
{
	url: '/Attributes/GetProducts', dataType: "json",  // Why are these two needed? - I am getting the data from the backend myself   
  dataFields: [
  	{ name: 'Id', type: 'number' },
  	{ name: 'Description', type: 'string' }
  ],
  id: 'Id'
}

let daMain = new $.jqx.dataAdapter(dsMain, {
  loadServerData: function (serverdata, source, callback) {
    // Simulate loading from the backend
    let recs = new Array();
    for (var i = serverdata.recordstartindex; i < serverdata.recordendindex; i++) {
      recs[i] = {Id: i+1, Description: "Test " + (i+1)};
    }
    callback({ records: recs, totalrecords: 100 });
  }
});

$("#gridMain").jqxGrid({
  source: daMain,
  width: 300, height: 600,

  virtualmode: true,
  // Why is this needed - it already called the data adapter to load the records
  rendergridrows: function (params) {
    return params.data;  // params.data is already populated from the data adapter
  },

  columns: [
    { text: 'Id', dataField: 'Id', width: 50 },
    { text: 'Description', dataField: 'Description', width: 200 }
  ]
});