Kendo UI Grid Virtual Scrolling
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<div id="customerGrid"></div>
CSS
html {
font: 12px sans-serif;
}
JavaScript
var managecustomerGrid = $("#customerGrid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 50,
batch: false
},
toolbar: "toolbar template missing",
height: 600,
scrollable: {
virtual: true
},
filterable: {
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
endswith: "Ends with",
eq: "Is equal to",
doesnotcontain: "Doesn't contain"
}
}
},
sortable: true,
columns: [{
field: "OrderID",
title: "SR No.",
width: "80px",
template: "<span id='#=OrderID#'>#=OrderID#</span>"
}, {
field: "ShipName",
title: "Ship Name",
width: "110px"
}, {
field: "OrderDate",
title: "Date",
width: "110px"
}, {
command: ["edit", "detail", "cancel"],
title: " ",
title: "Actions",
width: "130px",
filterable: false,
sortable: false
}]
});