Kendo Grid - Prevent multiple calls to database after Custom filter binding

Question

We are using some background filtering to bring data in kendo grid. We are showing filtered data based upon some columns So we have requirement to show that filters in kendo grid. After databound we are applying these filters to grid to show filtered columns

Here is the code snippet.

                var rows=grid.DataSource;
                var filterArray;
                 filterArray[0]={field: 'Duration',
                                 operator: 'Equal',
                                 value: 20
                                }
                 filterArray[1]={field: 'AgentName',
                                 operator: 'Contains',
                                 value: 'a'
                                 }

                 rows.Filter(filterArray);

but when apply filters Kendo make servre call to get data again based on filters, which we don't want because we have alredy displayed filtered data.

Is there any way to show filter column on grid without making server call ?We just need to set filter values in the filter textboxes.

Answer 1

I think this can be achieved by these steps:

1. Setting the filter
2. Refreshing the grid (not the datasource)

Example code:

var filterArray = new Array();
filterArray.push({field: 'Duration', operator: 'Equal', value:20});
filterArray.push({field: 'AgentName', operator: 'Contains', value: 'a'});
$("#grid").data("kendoGrid").dataSource._filter = { logic: "and", filters: filterArray };
$("#grid").data("kendoGrid").refresh();

Live example can be found here (Fill in something at FirstName contains and click the Add Filter button)