title: Why isn't my Virtual jqxgrid not working
body: <p>Why isn't my Virtual jqxgrid not working? </p>
  
  <p>I am replicating virtual data paging. </p>
  
  <p>I have JsonObject with 9 records. JsonObject is loaded after an Ajax call everytime textbox input changes.. Then grid is also reloaded with new data in JsonObject. But here I have manually added Json data to try virtual paging.</p>
  
  <p>It calls the rendergridrows() fine but it doesn't load records. It just says loading..Any idea please? Thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title id='Description'&gt;In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.&lt;/title&gt;
      &lt;link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /&gt;
      &lt;script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxcore.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxdata.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxmenu.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxgrid.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="../../scripts/gettheme.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              var theme = getTheme();
              // prepare the data
              var data = new Array();
              var jsonObject = { "contactList":[
  
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  {"age":1,"SId":"S1234567","gender":"male"},
  
  ], "totalrecords":9};
  
  //alert("jsonObject.totalrecords : " + jsonObject.totalrecords);
  
              // generate sample data.
              var generatedata = function (startindex, endindex) {
                  var data = {};
                  for (var i = startindex; i &lt; endindex; i++) {
  
              //alert(startindex + " " + endindex);
                      var row = {};
  
                              row["age"] = jsonObject.contactList[i].age;
                              row["gender"] = jsonObject.contactList[i].gender;
                              row["SId"] = jsonObject.contactList[i].SId;
  
  
                      data[i] = row;
                  }
                  return data;
              }
              var source =
              {
                  datatype: "array",
                  localdata: {},
                  totalrecords: jsonObject.totalrecords
              };
  
              // load virtual data.
              var rendergridrows = function (params) {
  
          alert("rendergridrows : " + source.totalrecords);
          //alert("rendergridrows : " + params.startindex + " " + params.endindex);
                  var data = generatedata(params.startindex, params.endindex);
                  return data;
              }
              var totalcolumnrenderer = function (row, column, cellvalue) {
                  var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                  return '&lt;span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;"&gt;' + cellvalue + '&lt;/span&gt;';
              }
              var dataAdapter = new $.jqx.dataAdapter(source);
              $("#jqxgrid").jqxGrid(
              {
                  width: 670,
                  autoheight: true,
                  source: dataAdapter,
                  theme: theme,
                  virtualmode: true,
                  pageable: true,
                  rendergridrows: rendergridrows,
                  columns: [
  
                            { text: 'Age', datafield: 'age', width: 50 },
                            { text: 'SId', datafield: 'SId', width: 120 },
                            { text: 'Gender', datafield: 'gender', width: 80 },
  
                  ]
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class='default'&gt;
      &lt;div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"&gt;
          &lt;div id="jqxgrid"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>