Edit this page

Show AutoComplete Suggestions for Current Grid Filter

The AutoComplete filter of the Grid is bound to the whole data source of the Grid widget.

However, it is possible to show the AutoComplete results only for the current filter of the Grid. To achieve this by following the steps below:

  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.

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

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