How to clear all grid filter controls?

2 Answers 2910 Views
Grid
Brian Roth
Top achievements
Rank 1
Brian Roth asked on 10 Apr 2012, 10:10 PM
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

2 Answers, 1 is accepted

Sort by
1
Alexander Valchev
Telerik team
answered on 13 Apr 2012, 10:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Brian Roth
Top achievements
Rank 1
commented on 13 Apr 2012, 04:44 PM

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
Telerik team
commented on 16 Apr 2012, 10:01 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Brian Roth
Top achievements
Rank 1
commented on 17 Apr 2012, 03:26 PM

Perfect.  Thanks!

Brian
0
Stefan Timm
Top achievements
Rank 2
answered on 31 Jul 2013, 09:09 AM
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
Top achievements
Rank 1
commented on 19 Feb 2014, 12:22 PM

$("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
Telerik team
commented on 24 Feb 2014, 09:40 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
crazy05
Top achievements
Rank 1
commented on 23 Dec 2014, 05:55 PM

[quote]Alexander Valchev said:

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

 
oin us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
[/quote]This is causing postback. How can we clear filters without postback ?
Dimo
Telerik team
commented on 25 Dec 2014, 10:15 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Ashish
Top achievements
Rank 1
commented on 26 May 2016, 08:59 AM

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

is there any other way to achieve this.

Dimo
Telerik team
commented on 30 May 2016, 08:30 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
n/a
Top achievements
Rank 1
commented on 22 Mar 2019, 09:53 AM

Hi,Alexander Valchev
It's working i used this.
Thanks.
Tags
Grid
Asked by
Brian Roth
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Stefan Timm
Top achievements
Rank 2
Share this question
or