title: Issues Loading jqGrid with 25,000 Rows
body: <p>I'm having some difficulty loading my jqGrid with a big amount of rows. Once my document is ready I'm calling a Javascript function that gets a collection of objects from an API and then adds the row data to the grid. Everything has been working fine, but now I have over 20,000 rows, so the grid never loads. Is there something I can do to fix this? Is it possible to only paint the data that the user can see? For example, if the row number on the pager is set to 50, can I simply only load 50 rows and not all 25,000?</p>
  
  <p>Here's my grid:</p>
  
  <p>$(function () {</p>
  
  <pre><code>        $("#grid").jqGrid({
              datatype: "local",
              loadonce: false,
              height: "auto",
              search: true,
              title: false ,
              autowidth: true,
              shrinkToFit: true,
              searchOnEnter: true,
              colNames: ['ID', 'BDO Number', 'BDO Date', 'Delivery Date', 'Miles', 'Zip Code', 'Zone', 'Fuel Surcharge', 'Driver', 'Driver Rate', 'Total Driver Pay', 'Order', 'Driver ID',
                          'Vendor ID', 'Vendor', 'Airport', 'Airline', 'Claim Reference', 'Clear Date', 'Mileage', 'Mileage Cost', 'Special', 'Special Cost', 'Exc Cost', 'Pickup Date', 'Total Delivery Cost',
                          'Vendor Profit', 'Driver Percent', 'Driver Fuel Surcharge', 'Total Driver Reported', 'Payment', 'User Cleared', 'Excess Costs', 'Additional Fees', 'DriverCostSchemaID'],
              colModel: [
                  { name: 'ID', index: 'ID', hidden: true },
                  { name: 'BDONumber', index: 'BDONumber', align: 'center', classes: 'gridButton' },
                  { name: 'BDODate', index: 'BDODate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                  { name: 'DeliveryDate', index: 'DeliveryDate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                  { name: 'Miles', index: 'Miles', width: 40, align: 'center' },
                  { name: 'ZipCode', index: 'ZipCode', width: 55, align: 'center' },
                  { name: 'Zone', index: 'Zone', width: 40, align: 'center' },
                  { name: 'FuelFloat', index: 'FuelFloat', width: 50, align: 'center', formatter: money, sorttype: 'float' },
                  { name: 'DriverName', index: 'DriverName', width: 125, align: 'center' },
                  { name: 'RateFloat', index: 'RateFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
                  { name: 'PayFloat', index: 'PayFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
                  { name: 'Order', index: 'Order', hidden: true },
                  { name: 'Driver', index: 'Driver', hidden: true },
                  { name: 'Vendor', index: 'Vendor', hidden: true },
                  { name: 'Airport', index: 'Airport', hidden: true },
                  { name: 'Airline', index: 'Airline', hidden: true },
                  { name: 'VendorName', index: 'VendorName', hidden: true },
                  { name: 'ClaimReference', index: 'ClaimReference', hidden: true },
                  { name: 'ClearDate', index: 'ClearDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                  { name: 'Mileage', index: 'Mileage', hidden: true },
                  { name: 'MileageCost', index: 'MileageCost', hidden: true, formatter: money },
                  { name: 'Special', index: 'Special', hidden: true },
                  { name: 'SpecialCost', index: 'SpecialCost', hidden: true, formatter: money },
                  { name: 'ExcCost', index: 'ExcCost', hidden: true, formatter: money },
                  { name: 'PickupDate', index: 'PickupDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                  { name: 'TotalDeliveryCost', index: 'TotalDeliveryCost', hidden: true, formatter: money },
                  { name: 'VendorProfit', index: 'VendorProfit', hidden: true, formatter: money },
                  { name: 'DriverPercent', index: 'DriverPercent', hidden: true },
                  { name: 'DriverFuelSurcharge', index: 'DriverFuelSurcharge', hidden: true, formatter: money },
                  { name: 'TotalDriverReported', index: 'TotalDriverReported', hidden: true, formatter: money },
                  { name: 'Payment', index: 'Payment', hidden: true },
                  { name: 'UserCleared', index: 'UserCleared', hidden: true },
                  { name: 'ExcCost', index: 'ExcCost', hidden: true },
                  { name: 'AdditionalFees', index: 'AdditionalFees', hidden: true, formatter: money },
                  { name: 'DriverCostSchemaID', index: 'DriverCostSchemaID', hidden: true },
              ],
              rowNum: 100,
              rowList: [100, 500, 1000, 100000],
              viewrecords: true,
              pager: "pager",
              sortorder: "desc",
              sortname: "DeliveryDate",
              ignoreCase: true,
              headertitles: true,
              emptyrecords: "There are no results.",           
          })
  
          $("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
  
          GetBDOs();
      });
  </code></pre>
  
  <p>And the GetBDOs function:</p>
  
  <p>function GetBDOs() {</p>
  
  <pre><code>        var request = $.ajax({
              url: "@Url.Action("GetBDOs", "DPAdmin")",
              type: "GET",
              cache: false,
              async: true,
              dataType: "json"
  
          });
  
          request.done(function (results) {
  
              var thegrid = $("#grid");
              thegrid.clearGridData();
              for (var i = 0; i &lt; 100; i++) {
                  thegrid.addRowData(i + 1, results[i]);
              }
              thegrid.trigger("reloadGrid");
  
          });
      }
  </code></pre>
  
  <p>Which calls this:</p>
  
  <pre><code>        [Authorize]
          public JsonResult GetBDOs()
          {
              List&lt;BDO&gt; BDOs= new List&lt;BDO&gt;();
  
              // Get all BDOs
              BDOs = WebInterface.GetBDOs();
  
              var jsonResult = Json(BDOs.ToArray(), JsonRequestBehavior.AllowGet);
              jsonResult.MaxJsonLength = int.MaxValue;
              return jsonResult;
          }
  </code></pre>
  
  <p>WebInterface.GetBDOs simply hits the database and grabs all the current BDO objects, which is now between 20,000 - 25,000 and freezes the grid. Any help with this?</p>