New to Kendo UI for jQuery? Download free 30-day trial

Grid External Search Form


Product Progress® Kendo UI® Grid for jQuery Created with version 2017.3.1026


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


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>
        function search(){
            var orderFrom = $("#orderIdFrom").data("kendoNumericTextBox").value();
            var orderTo = $("#orderIdTo").data("kendoNumericTextBox").value();
            var externalFilter = { 
              logic: "and",
                {field:"OrderID", operator: "gte", value:orderFrom },
                {field:"OrderID", operator: "lte", value:orderTo },

        var grid = $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: ""
            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: [{
          }, "Freight",
             field: "OrderDate",
             title: "Order Date",
             format: "{0:MM/dd/yyyy}"
           }, {
             field: "ShipName",
             title: "Ship Name"
           }, {
             field: "ShipCity",
             title: "Ship City"
In this article