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=new wijmo.collections.CollectionView();
  
  var pos;
  var curIndex=1;
  var requestCount=0;
  // initialize the grid
	var grid = new wijmo.grid.FlexGrid('#flex', {
  	itemsSource: data,
    autoGenerateColumns: false,
    columns: [
     	{ binding: 'postId', format: 'f0' },
     	{ binding: 'id' },
     	{ binding: 'name' },
     	{ binding: 'email', format: 'f2' },
    ],
    scrollPositionChanged: function(s, e) {
    	if (s.viewRange.bottomRow >= s.rows.length - 1) {
        data.currentItem=null;
				addData(data, curIndex);
        curIndex++;
      }
    },
  });
	addData(data, curIndex);
        curIndex++;
   addData(data, curIndex);
        curIndex++;   
  // add random data to an array
  function addData(data, postNo) {
  	requestCount++;
  	var baseURL='https://jsonplaceholder.typicode.com/posts/';
    fetch(baseURL+postNo+"/comments")
  .then(response => response.json())
  .then(json => {
  	json.forEach((elem)=>{
    data.sourceCollection.push(elem);
    //grid.collectionView.refresh();
    });
    requestCount--;
    console.log(data);
  });
  }

}