kendo grid

by merganser

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
<div id="urlpath">

</div>

<div id="grid"></div>

CSS

div#urlpath{width:100%;border:1px dotted black;height:20px;}

JavaScript

var url ="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"; 
 
 
 $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: url
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        filterable: true,
                        columnMenu: true,
                        sortable: true,
                        pageable: true
                    });
                });