Wijmo 5 - FlexGrid with Infinite Scrolling

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.grid.min.js"></script>
<h1>
  FlexGrid with Infinite Scrolling
</h1>
<p>
  Scroll down the grid and more data will be appended.
<p>

<div id="flex"></div>

CSS

.wj-flexgrid {
  height: 300px; 
  margin-top:10px;
}

JavaScript

onload = function() {

	// start with a small data set
	var data = getData(50);
  
  // initialize the grid
	var grid = new wijmo.grid.FlexGrid('#flex', {
  	itemsSource: data,
    scrollPositionChanged: function(s, e) {
    
    	// if we're close to the bottom, add 10 items
    	if (s.viewRange.bottomRow >= s.rows.length - 1) {
				addData(data, 20);
        s.collectionView.refresh();
      }
    }
  });

	// get an array with random data
	function getData(cnt, start) {
    var data = [];
		var countries = 'USA,Germany,UK,Japan,Italy,Greece'.split(',');
    if (!start) start = 0;
    for (var i = 0; i < cnt; i++) {
    	data.push({
				id: i + start,
        country: countries[i % countries.length],
        date: new Date(2014, i % 12, i % 28),
        amount: Math.random() * 10000,
        active: i % 4 === 0
			});
		}
    return data;
	}
  
  // add random data to an array
  function addData(data, cnt) {
  	var more = getData(cnt, data.length);
    for (var i = 0; i < more.length; i++) {
    	data.push(more[i])
    }
  }

}