JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="grid"></div>
<input type="button" value="emulate 47 rows" id="command"/>
<br/>
To reproduce: skroll down to the last page and click the "emulate 47 rows" button

JavaScript

// initial emulated row count

var emulatedRowCount = 125;

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            var rows = new Array();
            var skip = options.data.skip;
            var take = options.data.take;
            if(skip < emulatedRowCount) {
                var count = Math.min(emulatedRowCount, skip + take);
                for(var i = options.data.skip; i < count; i++)
                    rows.push({ProductName: 'Product' + i, UnitPrice: i});
            }
            options.success({ total: emulatedRowCount, data: rows});
        }
    },
    serverPaging: true,
    pageSize: 40,
    schema: {
        total: 'total',
        data: 'data'
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,        
    pageable: false,
    scrollable: { virtual: true },
    height: 400,
    columns: [
        "ProductName",
        { field: "UnitPrice", format: "{0:c}", width: "150px" }
    ]
});

$("#command").click(function() {        
   emulatedRowCount = 47;
   $("#grid").data('kendoGrid').dataSource.read();
   $("#grid").data('kendoGrid').refresh();
});