Lazy loading of large data: 10 million rows

This example is displaying data stored in a sql server database with 10 million ( 10,000,000 ) records. . Typically this kind of data occupies many Giga bytes of storage on remote server.

Records are fetched from remote database in small batches depending upon the scrollbar position in viewport. This methodology is deemed appropriate in situations where the quantity of records to be fetched from a remote server is so substantial that even the utilization of background loading becomes impractical. This is primarily due to the inherent risk of overwhelming the user's local resources, thereby necessitating a more strategic and resource-conscious retrieval approach.

The server side script combines the scripts used for remote paging, remote filtering and remote sorting. The records can be sorted and filtered remotely.

Comparison with other ways of loading remote data ( without pager UI )

- Background loadingLazy loadingRemote loading
Modus operandi Viewport records are loaded with the highest priority, beginning with those corresponding to the initial and current position of the scrollbar. Subsequently, records in proximity to the viewport scroll position are loaded, continuing this process until all records are fetched and loaded in the browser. Initially, records corresponding to the current viewport position are loaded. Additional records are loaded only upon scrolling, provided there are no existing rows at the new scroll position. All the records are loaded in a single batch
Value of dataModel.locationlazyremoteremote
Usage of pageModel.rPPyesnono
Approximate no of rows10,000 - 500,000Unlimited rows ( tested till 50,000,000 )~ 10,000
Supported features
  • Plain grid
  • Row detail / Nesting of grids
  • Row grouping
  • Pivot
  • Local sorting, filtering ( only after entire data is loaded )
  • Remote sorting, filtering
  • Checkbox columns
  • Batch editing
  • Plain grid
  • Remote sorting, filtering
  • Checkbox columns
  • Batch editing
All features
Grid interactivity while data is fetchedPartially interactive after intial batch of dataFully interactive after intial batch of dataNot until entire data is loaded
Progress barPresentNot applicableNot applicable

Pro tip: pqVS.rpp value should always be more than number of rendered rows in the viewport otherwise some of the rows may remain empty with fast scrolling up and down the grid. In this example number of rendered rows in viewport is ~12 in normal view while ~21 when grid is in full screen mode, so rpp is chosen to be 100.