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:
- 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.
<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>