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">
<button type="button" id="sampleClick" style="position: absolute; z-index: 1000">Sample</button>
<div id="grid"></div>
JavaScript
var ds;
var allRows = [];
$(document).ready(function() {
$('#sampleClick').click(onSampleClick);
for (var i = 0; i < 5000; i++) {
allRows.push({
id: i,
value: new Date().getDate()
});
}
ds = {
serverPaging: true,
schema: {
data: "data",
total: "total"
},
transport: {
read: function(options) {
var data = getData(options.data.skip);
options.success(data);
}
},
pageSize: 100
};
$("#grid").kendoGrid({
autosync:false,
dataSource: ds,
height: 550,
selectable: "multiple cell",
pageable: false,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{
field: "id",
title: "id"
},
{
field: "value",
title: "value",
}
]
});
});
function getData(skip)
{
var dataArr = [];
var lastIndex = skip+100;
if (lastIndex>=allRows.length)
lastIndex = allRows.length;
for (var i = skip; i < lastIndex; i++){
var row = allRows[i];
row.value = new Date().getTime();
dataArr.push(row);
}
return {data: dataArr, total: allRows.length};
}
function onSampleClick() {
var kendoGrid = $("#grid").data("kendoGrid");
var firstItemInView = kendoGrid.dataSource._view[0];
kendoGrid.dataSource._skip = firstItemInView.id;
kendoGrid.dataSource.read();
}