Handle the Kendo Grid Filter on your own way

Knoldus Inc.
Knoldus - Technical Insights
1 min readMar 18, 2016

In the kendo api, the kendo provides the Grid View to show the large data into a tabular form as grid. It collects meaningful data records and have filters on them to categorize data into various groups and choose which meets our requirement best.

We can enable the filter by following code in while initializing the Kendo Grid ,

$("#myGrid").kendoGrid({
filterable: true,
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Ram", age: 45 },
{ name: "Karan", age: 46 }
]
});
Now just put the following code to handle its functionality manually,var originalFilter = kendo.data.DataSource.fn.filter;kendo.data.DataSource.fn.filter = function (e) {
if (arguments.length > 0) {
var filteringField = arguments[0].filters[0].field;
var filteringValue = arguments[0].filters[0].value;

// -- PUT YOUR FUNCTIONALITY HERE --
}
return originalFilter.apply(this, arguments);
};

Above filteringField is the field on which the value filteringValue is selected.
If you want some data source to be loaded in grid, just put$("#myGrid").data('kendoGrid').setDataSource(new kendo.data.DataSource({
data: [{ "name": "Akash", "age": 69 }]
}));
So now you can play your on functionality just before the grid plays its filtering.

--

--

Knoldus Inc.
Knoldus - Technical Insights

Group of smart Engineers with a Product mindset who partner with your business to drive competitive advantage | www.knoldus.com