Grid External Search Form

Environment

Product

Progress® Kendo UI® Grid for jQuery

Created with version

2017.3.1026

Description

I want to implement a search form that accepts search criteria before populating the grid. Please advise how I can achieve this.

Solution

The most common way of implementing such functionality is the following:

1. Set the autoBind Kendo UI Grid property to false
2. Add a click handler to some button to be executed when the filter criteria is submitted
3. Get the Kendo UI Grid instance and filter the data source with the filter() method.

    <div id="example">
      <label for="orderIdFrom">Order From</label>
      <input type="text" class="num" id="orderIdFrom" placeholder="min 10248" required value="10248"/>
      <label for="orderIdTo">Order To</label>
      <input type="text" id="orderIdTo" placeholder="max  110077" class="num" required value="10250"/>
      <button class="k-button" onclick="search()">Search</button>
      <br /><br /><br />
      <div id="grid"></div>
      <script>
        function search(){
          if($("[data-role='validator']").data("kendoValidator").validate()){
            var orderFrom = $("#orderIdFrom").data("kendoNumericTextBox").value();
            var orderTo = $("#orderIdTo").data("kendoNumericTextBox").value();
            var externalFilter = { 
              logic: "and",
              filters:[
                {field:"OrderID", operator: "gte", value:orderFrom },
                {field:"OrderID", operator: "lte", value:orderTo },
              ]
            };
            grid.dataSource.filter(externalFilter);
          }
        }

        $(".num").kendoNumericTextBox();
        var grid = $("#grid").kendoGrid({
          autoBind:false,
          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,
            serverSorting: true
          },
          height: 550,
          filterable: true,
          sortable: true,
          pageable: true,
          columns: [{
            field:"OrderID",
          }, "Freight",
           {
             field: "OrderDate",
             title: "Order Date",
             format: "{0:MM/dd/yyyy}"
           }, {
             field: "ShipName",
             title: "Ship Name"
           }, {
             field: "ShipCity",
             title: "Ship City"
           }]
        }).data("kendoGrid");
        $(".num").kendoValidator()
      </script>
    </div>