Kendo Grid Serverside Pagi

by LeeMellinger

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

<style>html { font-size: 8px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        schema: {
            data: "data",
            total: "total"
        },
        pageSize: 10,
        transport: {
            read: function(options) {
                        
                var data = getData(options.data.page, 10);
                options.success(data);
            }
        }
    },
    pageable: {
        refresh: true,
        //pageSize: 10,  // Visual display
        numeric: false,       
        messages: {
            display: "{0}-{1} of {2} rows"
        }
    },
    scrollable: false,
    editable: false,
    sortable: true,
    navigatable: false,
    resizable: true,
    reorderable: true,
    selectable: true,
    scrollable: { virtual: true },
    filterable: {
    	mode: "row",
        extra: false
    },
});

function getData(page, pageSize)
{
	
	let data = [];
    
    for (var i = 0; i < pageSize; i++)
        data.push({ text: "Item " + (i + 1) + " on page " + page, value: 1});
    
    return {data: data, total: 95};
}