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

Implement Excel-Like Filter Menus

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All

Description

How can I filter the jQuery Grid by Kendo UI by using AutoComplete and by showing results from the current Grid filter?

Solution

The following example demonstrates how to set the Grid with an Excel-like filter that has sorted and unique items.

To set a single Data Source for all filter menus, the example uses the columns.filterable.dataSource property of the Grid.

To observe this behavior:

  1. Filter the Product Name column.
  2. Open the Unit Price column. Note that the values are filtered based on the currently applied filter on the Product Name column.
   <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div id="example">
      <div id="grid"></div>

      <script>
        $(document).ready(function() {

          function removeDuplicates(items, field) {
            var getter = function(item){return item[field]},
                result = [],
                index = 0,
                seen = {};

            while (index < items.length) {
              var item = items[index++],
                  text = getter(item);

              if(text !== undefined && text !== null && !seen.hasOwnProperty(text)){
                result.push(item);
                seen[text] = true;
              }
            }

            return result;
          }

          var filterSource = new kendo.data.DataSource({
            data: products
          });

          $("#grid").kendoGrid({
            dataSource: {
              data: products,
              schema: {
                model: {
                  fields: {
                    ProductName: { type: "string"},
                    UnitPrice: { type: "number" },
                    UnitsInStock: { type: "number" },
                    Discontinued: { type: "boolean" }
                  }
                }
              },
              pageSize: 20,
              change: function(e) {
                filterSource.data(e.items);
              },
            },
            height: 550,
            scrollable: true,
            sortable: true,
            pageable: {
              input: true,
              numeric: false
            },
            filterable: true,
            filterMenuInit: function (e){
              var grid = e.sender;
              e.container.data("kendoPopup").bind("open", function() {
                filterSource.sort({field: e.field, dir: "asc"});
                var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
                filterSource.data(uniqueDsResult);
              })
            },
            columns: [
              {field: "ProductName", filterable: {
                multi: true,
                dataSource: filterSource
              }
              },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px",filterable: {
                multi: true,
                dataSource: filterSource
              } },
              { field: "UnitsInStock", title: "Units In Stock", width: "130px",filterable: {
                multi: true,
                dataSource: filterSource
              } },
              { field: "Discontinued", width: "130px"}
            ]
          });
        });
      </script>
    </div>

See Also

In this article