New to Telerik UI for ASP.NET Core? Download free 30-day trial

Implement Excel-Like Filter Menus

Environment

Product Telerik UI for ASP.NET Core Grid
Operating System All
Browser All
Browser Version All

Description

How can I filter the Kendo UI Grid ASP.NET Core 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.

  • Initialize a common DataSource for all the filter menus.
    @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("dataSourceShared")
        .Ajax(dataSource => dataSource
           .Read(read => read.Action("EditingInline_Read", "Grid"))
           .ServerOperation(false)
        )
    )
  • Set the commmon DataSource for the columns that will be filtered through the Filterable configuration method.
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).Filterable(ftb => ftb.Multi(true).DataSource("dataSourceShared"));
        columns.Bound(p => p.UnitPrice).Filterable(ftb => ftb.Multi(true).DataSource("dataSourceShared")).Width(100);
        columns.Bound(p => p.UnitsInStock).Filterable(ftb => ftb.Multi(true).DataSource("dataSourceShared")).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
    })
  • Initialize a function to remove the duplicate data items from the shared dataSource when filtering.
    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;
    }
  • Sort and set unique items in the FilterMenuInit event whilst removing the duplicate data items.
    .Events(events => events.FilterMenuInit("onFilterMenuInit"))

    function onFilterMenuInit(e) {
        var grid = e.sender;
        e.container.data("kendoPopup").bind("open", function () {
            dataSourceShared.sort({ field: e.field, dir: "asc" }); //sort the fields
            var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field); //get the unique results only
            dataSourceShared.data(uniqueDsResult); //set the unique result in the shared dataSource for the filter menus
        })
    }
  • Update the data items by subscribing to the Change event of the DataSource.
    function onChange(e) {
            dataSourceShared.data(e.items);
    }

To observe this behavior, refer to the following Telerik REPL and:

  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.
In this article