grid example

<!DOCTYPE html>
<html>
    <head>
        <title>Binding to remote data</title>
        <meta charset="utf-8">
        <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="../styles/kendo.common.min.css" rel="stylesheet">
        <link href="../styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="../styles/kendo.default.min.css" rel="stylesheet">
        <link href="../styles/kendo.default.mobile.min.css" rel="stylesheet">
        <script src="../js/jquery.min.js"></script>
        <script src="../js/jszip.min.js"></script>
        <script src="../js/kendo.all.min.js"></script>
        <!--script src="../content/shared/js/console.js"></script-->
        <script>

        </script>


    </head>
    <body>


        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://template.site/kendoui/data/grid_data.php" //rubah targetnya
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: {type: "number"},
                                        Freight: {type: "number"},
                                        ShipName: {type: "string"},
                                        OrderDate: {type: "date"},
                                        ShipCity: {type: "string"}
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        filterable: true,
                        sortable: true,

                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                                field: "OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name"
                            }, {
                                field: "ShipCity",
                                title: "Ship City"
                            }
                        ]
                    });
                });
            </script>
        </div>



    </body>
</html>