Kendo Grid Serverside Paging (odata)

Kendo example from Kendo site. Uses odata.

by LeeMellinger

HTML

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

CSS

<style>html { font-size: 14px; 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" />

TypeScript

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                          	filter: { "field": "ShipName", "operator": "startswith", "value": "V" },
                        },
                        height: 550,
                        filterable: {
                            mode: "row",
                            extra: false,
                            showOperators: false,
                        },
                        pageable: true,
                        columns: 
                        [{
                            field: "OrderID",
                            width: 225,
                            filterable: {
                                cell: {
                                    showOperators: false
                                }
                            }
                        },
                        {
                            field: "ShipName",
                            width: 500,
                            title: "Ship Name",
                 ...