JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<div id="grid"></div>
<br>
<div id='counter'>update count = 1</div>
<br>
<button id='updateButton'>update rows</button>

JavaScript

var allRows = [];
var updateCount = 0;

function updateData() {
    ++updateCount;
    for (var row = 0; row < 2000; ++row) {
        if (!allRows[row]) allRows.push({
            id: row
        });
        allRows[row].value = updateCount + ':' + row;
    }
    $('#counter').html('update count = ' + updateCount);
    var kgrid = kendo.widgetInstance($('#grid'));
    if (kgrid) {
        kgrid.dataSource.data(allRows);
        kgrid.refresh();
    }
}

//var useVirtualScrolling = false;  //works OK if false...
// ... but if true, scrolling is all wrong after update
var useVirtualScrolling = true;

$(document).ready(function () {

    var scroll = true;
    var ds = {
        data: allRows
    };
    if (useVirtualScrolling) {
        ds.pageSize = 30;
        scroll = {
            virtual: true
        };
    }
    $('#grid').kendoGrid({
        height: 300,
        dataSource: ds,
        scrollable: scroll,
        columns: [{
            field: "id"
        }, {
            field: "value"
        }],
    });
    $('#updateButton').click(updateData);
    updateData();
});