Kendo Grid Serverside Paging (json)

Kendo example from Kendo site. Converted to use json.

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: {
            filter: { "field": "ShipName", "operator": "startswith", "value": "Vin" },
            transport: {
                read: function (option) {
                	getData(option)
                }
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 50,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
        },
        height: 700,
        filterable: {
            mode: "row",
            extra: false,
            showOperators: false,
        },
        editable: false,
        sortable: {virtual: true},
        pageable: {
            refresh: true,
            pageSize: 50,
            numeric: false,
            messages: {
                display: "{0}-{1} of {2} rows"
            }
        },
        reorderable: true,
        selectable: true,
        navigatable: false,
        resizable: true,
        dataBound: function (e) {

            // Hide the column filter dropdownlist.
            $('.k-dropdown-operator').hide();

            // ---------------------------
            // Filter
            // ---------------------------
            if (showFilterBar) {
                $(".k-filter-row").show();
            } else {
                $(".k-filter-row").hide();
            }                       
        },
        columns: 
        [{
            field: "OrderID",
            width: 225,
            filterable: {
                cell: {
                    showOperators: false
                }
            }
        },
         {
  ...