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 ,


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

About Harsh Sharma Khandal

Harsh is a Sr. Software Consultant at Knoldus Software LLP with 4 year of experience. He is a fan of programming standards and conventions. He has good knowledge of Scala, Java, 3D Modeling and 3D animation. His current passions include utilizing the power of Scala, Akka and Play to make reactive applications. He is a technologist and is never too far away from the keyboard. He believes in standard coding practices. His focus always remains on practical work. He has Master's in Computer Applications from Rajasthan Technical University, Kota. His hobbies include reading books and writing the code in multiple ways to find the best way it can be represented.
This entry was posted in kendo, Scala and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s