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.

EditPreviewOpen In Dojo

    <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>