Kendo grid basic example.

Direct OData binding with filtering in the header.

by Kamal Rawat

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.flat.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.flat.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css">
<h1> Kendo grid, basic example</h1>

<div id="example">
            <div id="grid"></div>
 </div>
 
 <script id="alt-template" type="text/x-kendo-template">
    <ul id="myMenu">
      <li class="emptyItem">
        <span class="empty">&nbsp;</span>
        <input type="checkbox" id="chkall"/>
        <ul>
          <li class="item1">All</li>
          <li class="item2">Current page</li>
        </ul>
      </li>
    </ul>
</script>

CSS

html{
    font-size: 13px; 
    font-family: Tahoma, Verdana, Helvetica, sans-serif;   
    color: dimgrey;
}
#myMenu {
        display: inline-block;
      }

      #myMenu .emptyItem {
        border-right-width: 0;
      }

      #myMenu .emptyItem > .k-link {
        padding-left: 0 !important;
      }

JavaScript

$(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 50
                        },
                        height: 850,
                        groupable: false,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 15
                        },
                        columns: [
                        { 
                        title: "select all",
                        headerTemplate: kendo.template($("#alt-template").html()),
                        template: "<input type='checkbox' class='checkbox' />" },
                        {
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                    
                    
                    $("#myMenu").kendoMenu({
          openOnClick: true
        });
                    
                    
                    
                });