Handle the Kendo Grid Filter on your own way

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.