How to clear all grid filter controls?

[Brian Roth]

I added a custom button to my grid to clear any currently active filters.  It's mostly working, but I am having a problem getting the filtermenu control to completely clear.  With the code below the actual data in the grid is unfiltered and the first item in each filtermenu is cleared.  The problem is that if you add an "and" or "or" condition to the filtermenu, the second condition is not cleared.  Any ideas as to how to properly do this?  Or is it possible to get a "clearAllFilters" method on the grid at some point in the future?  Thanks for your help.

$(".k-grid-clearfilters").click(function() {

    // Clear the grid filters

    var gridDataSource = $("#departmentgrid").data("kendoGrid").dataSource;

    for (var i = 0; i < gridDataSource.options.fields.length - 1; i++) {

        gridDataSource.filter({ field: gridDataSource.options.fields[i].field, value: "" });

    }

    gridDataSource.filter([]);

});

Regards,
Brian

[Alexander Valchev]

Hi Brian,

That functionality is not supported out of the box. Indeed the grid.dataSource.filter({}) affects only the dataSource and is not supposed to clear the filter menu forms.

What I can suggest is to trigger the click event of the filter menu's clear buttons, thus way all the filters will be reset and the input fields will be cleared as well.

$("form.k-filter-menu button[type='reset']").trigger("click");

In this jsFiddle demo you can see the approach in action.

All the best,
Alexander Valchev
the Telerik team

[Brian Roth]

Hi Alexander,

Thanks, that's so close to what I'm looking for!  The only problem with my situation is I have multiple grids on the same page and want the Clear Filter button to only work on the grid it is tied to.  The code you provided clears out all the filters on all the grids.  Is there a way to identify which grid each filter menu is tied to?  I tried looking at the html for the page and couldn't figure out an easy way to determine this.

Thanks,
Brian

[Alexander Valchev]

Hello Brian,

Probably the easiest way is to reduce the set of the items returned by the jQuery selector. You could use the slice method for that purpose. For example: http://jsfiddle.net/valchev/M24Ej/12/ 

All the best,
Alexander Valchev
the Telerik team

[Brian Roth]

Perfect.  Thanks!

Brian

[Stefan Timm]

Hi, the better way is:

Set a custom commant in toolbar and create the java script function. So you have control of each grid in one website inside tabs

.ToolBar(toolbar =>
{
    // Custom Command with Java Script
    toolbar.Custom().Text("Reset Filter").HtmlAttributes(new { id = "gridAllFilterReset" });
})

$("#gridAllFilterReset").click(function (e) {
    e.preventDefault();
    var datasource = $("#gridAllEvents").data("kendoGrid").dataSource;
    //Clear filters:
    datasource.filter([]);
});

[Evert]

$("form.k-filter-menu button[type='reset']").trigger("click") triggers a click event for each filter set. If you have multiple filters set, the grid will rebind after every reset.

Is there a way to suppress the automatic rebind when using the approach above, and then call dataSource.filter([]) to perform a manual rebind() ?

Thanks,
Evert

[Alexander Valchev]

Hello Evert,

It is possible to suppress the rebinding action at the dataBinding event of the Grid. You should keep in mind however that the dataBinding event triggers every time when the data is changed (read initially, edited, sorted, grouped, filtered and etc.). You will have to develop a custom logic responsible for preventing the dataBinding action only in the case you want.

Alternatively you may select all the filter inputs and clear their value manually. After this you may call dataSource.filter([]) to clear the filters set in the dataSource of the widget.

Regards,
Alexander Valchev
Telerik

[crazy05]

[quote]Alexander Valchev said:

$("form.k-filter-menu button[type='reset']").trigger("click");

 

 

[/quote]This is causing postback. How can we clear filters without postback ?

[Dimo]

Hello Ram,

Changing the Grid's filtering, sorting or paging settings causes the widget to rebind. If the Grid is bound to remote data, it will request data from the remote service via Ajax. If the Grid is bound to local data, no request will be made. If you are using an MVC Grid wrapper and it is server-bound, the whole page will be reloaded.

It is not possible to clear the filter criteria without rebinding the widget.

Regards,
Dimo
Telerik

 

 

[Ashish]

It seems that this feature does not work when grid filter is .Mode(GridFilterMode.Row),

is there any other way to achieve this.

[Dimo]

Hello Ashish,

When a filter row is used, there are no "reset" buttons that can be clicked programmatically, i.e. the following selector will not return any DOM elements:

$("form.k-filter-menu button[type='reset']")

However, using the filter() method of the Grid DataSource instance should be enough in your case.

1) Go to http://demos.telerik.com/kendo-ui/grid/filter-row
2) Apply some filters to the Grid
3) Execute the following in the browser's JavaScript console. The Grid will rebind and all filtering inputs will be cleared.

$("#grid").data("kendoGrid").dataSource.filter({})

Regards,
Dimo
Telerik

[n/a]

Hi,Alexander Valchev
It's working i used this.
Thanks.

[Robert]

This worked perfectly for me. Thanks

$("#grid").data("kendoGrid").dataSource.filter({})