New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
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.
Razor
@(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.
Razor
.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.
JS
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.
Razor
.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.
JS
function onChange(e) {
dataSourceShared.data(e.items);
}To review the comlete example, refer to the project on how to use an Excel-like filter in the Telerik UI Grid in ASP.NET MVC applications.