Implementing Excel-Like Filter Menus in the Grid
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I filter the Telerik UI for ASP.NET MVC 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
Filterableconfiguration 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
FilterMenuInitevent 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
Changeevent of the DataSource.
function onChange(e) {
dataSourceShared.data(e.items);
}
To observe this behavior, refer to the following Telerik REPL and:
- Filter the Product Name column.
- Open the Unit Price column. Note that the values are filtered based on the currently applied filter on the Product Name column.