Demo - FlexGrid and Virtual Data

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid and Virtual Data
  </h1>
  <p>
    This sample binds the grid to an array with fixed length
    and no data. As the user scrolls through the grid, rows
    are loaded on demand.</p>
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

	// create an array with a given length and no items in it
  var myData = [];
  myData.length = 10000;

  // create a grid and bind it to the array
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    columns: [
    	{ binding: 'id', isReadOnly: true, dataType: 'Number', width: 80 },
      { binding: 'name', dataType: 'String', width: 160 },
      { binding: 'date', dataType: 'Date' },
      { binding: 'amount', dataType: 'Number' },
		],
    itemsSource: myData,

    // load data as the grid scrolls
    scrollPositionChanged: getVirtualDataAsync
	});

  // load data for the initial window
  getVirtualDataAsync(theGrid);

  // call the function that loads the virtual data on demand asynchronously
  // the async delay simulates getting data from the server
  var getDataTimeout = null;
  function getVirtualDataAsync(grid) {
  	if (getDataTimeout) {
    	clearTimeout(getDataTimeout);
		}
		getDataTimeout = setTimeout(function() {
    	getDataTimeout = null;
      getVirtualData(grid);
		}, 200);
	}

  // function that loads the virtual data on demand
  function getVirtualData(grid) {
  	var arr = grid.collectionView.sourceCollection,
    	  vr = grid.viewRange,
        start = vr.topRow,
        end = vr.bottomRow,
        loaded = false;

		// load data for any null items in the view range
    for (var i = start; i <= end; i++) {
    	if (arr[i] == null) {
      	arr[i] = {
        	id: i,
          name: 'Customer ' + i,
          date: new Date(2018, 0, i),
          amount: Math.random() * 1000
				}
        loaded = true;
			}
		}

    // if any data was loaded, refresh the collectionview
    if (loaded) {
    	console.log('got it');
      grid.collectionView.refresh();
		}
	}
}