Kendo UI Grid

Local data, mobile scrolling.

by siliconsoul

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.blueopal.min.css">
<div id="grid"></div>

JavaScript

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverPaging: true,
                            serverSorting: true,
                            pageSize: 100,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            }
                        },
                        height: 430,
                        scrollable: {
                            virtual: true
                        },
                        sortable: true,
                        columns: [
                            { field: "OrderID", title: "Order ID", width: 60 },
                            { field: "CustomerID", title: "Customer ID", width: 90},
                            { field: "ShipName", title:"Ship Name", width: 220 },
                            { field: "ShipAddress", title:"Ship Address", width: 280 },
                            { field: "ShipCity", title:"Ship City", width: 110 },
                            { field: "ShipCountry", title:"Ship Country", width: 110 }
                        ]
                    });
                });