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

Show AutoComplete Suggestions for Current Grid Filter

Environment

Product Progress® Kendo UI® AutoComplete for jQuery Progress® Kendo UI® Data Grid for jQuery
Operating System Windows 10 64bit
Browser Google Chrome

Description

How can I show AutoComplete suggestions for the current Grid filter in Kendo UI?

Solution

The AutoComplete filter of the Grid is bound to the whole data source of the Grid control. However, it is possible to show the AutoComplete results only for the current filter of the Grid.

  1. Handle the dataBound event of the Grid.
  2. Get the data source filter of the Grid in the dataBound handler and set it as a filter to the AutoComplete data source.

The following example demonstrates how to use the AutoComplete for filtering and consider the current filter of the Grid.

    <div id="grid"></div>
    <script>
    function filterAutoCompleteDataSource(e) {
      var gridFilter = e.sender.dataSource.filter();
      e.sender.element.find(".k-autocomplete input").data("kendoAutoComplete").dataSource.filter(gridFilter);
    }

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

See Also

In this article