Untitled


<!DOCTYPE html>
<html>
  <head>
    <base href="https://demos.telerik.com/kendo-ui/grid/filter-row">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>


  </head>
  <body>

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

 				var grid;

        $(document).ready(function() {
         grid = $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://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,
            },
            height: 550,
            filterable: {
              mode: "row"
            },
            pageable: true,
            columnMenu:true,
            columns:
            [{
              field: "OrderID",
              width: 225,
              filterable: {
                cell: {
                  showOperators: false
                }
              }
            },
             {
               field: "ShipName",
               width: 500,
               title: "Ship Name",
               filterable: {
                 cell: {
                   operator: "contains",
                   suggestionOperator: "contains"
                 }
               }
             },{
               field: "Freight",
               width: 255,
               filterable: {
                 cell: {
                   operator: "gte"
                 }
               }
             },{
               field: "OrderDate",
               title: "Order Date",
               format: "{0:MM/dd/yyyy}"
             }]
          }).getKendoGrid();
        });

       // Only needed if you want to configure the rest of the filterable options
       // function closeCallback(element) {
       //   focusTable(element.closest("table"), true);
       // }

       // function filterInit(e) {
       //   grid.trigger("filterMenuInit", { field: e.field, container: e.container });
       // }

        $(function(){
          var grid = $("#grid").getKendoGrid();
          var th = $("tr.k-filter-row th").eq(1);
          th[0].setAttribute("data-field", "ShipName");

          var options ={
            dataSource: grid.dataSource,
            values: grid.columns[1].values,
            format: grid.columns[1].format,
            // closeCallback: closeCallback,
            title: grid.columns[1].title || grid.columns[1].field,
            //init: filterInit,
            //open: filterOpen,
            //pane: that.pane,
            //change: filterHandler
          };

          th.kendoFilterMultiCheck(options);
        });

      </script>
    </div>


  </body>
</html>