Edit this page

Filter Grid as You Type

Your project might require you to filter the Grid as the user types.

To achieve this behavior, provide for the following requirements:

  • Enable the row filtering mode.
  • Use a custom filter cell template for the desired Grid column.
  • The purpose of the filter cell template is to attach a keydown or keypress event handler to the textbox (args.element) and, within this handler, to trigger the change event of the textbox. The change event will trigger the filtering functionality of the Grid.
  • Change the default "eq" operator of the column with "contains", "startswith" or any other supported operator.

The following example demonstrates how to filter the Grid on the fly, as the user types in the filter row textbox.

Example
    <div id="grid"></div>

    <script>

      $(function(){
        $("#grid").kendoGrid({
          dataSource: products,
          filterable: {
            mode: "row"
          },
          height: 400,
          columns: [{
            field: "ProductName",
            title: "Product Name",
            filterable: {
              cell: {
                operator: "contains",
                template: function (args) {
                  args.element.css("width", "90%").addClass("k-textbox").keydown(function(e){
                    setTimeout(function(){
                      $(e.target).trigger("change");
                    });
                  });                   
                },
                showOperators: false
              }
            }
          }]
        });
      });

      var products = new kendo.data.DataSource({
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductName: { type: "string" }
            }
          }
        },
        transport: {
          read: {
            url: "//demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
          }
        }
      });

    </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy