Implementing Excel-Like Filter Menus in the Grid

Environment

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

Description

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

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base