How to clear all grid filter controls?

12 posts, 1 answers
  1. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 10 Apr 2012 Link to this post

    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. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 13 Apr 2012 Link to this post

    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
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 16 Apr 2012 Link to this post

    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!
  6. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 17 Apr 2012 Link to this post

    Perfect.  Thanks!

    Brian
  7. Stefan Timm
    Stefan Timm avatar
    6 posts
    Member since:
    May 2007

    Posted 31 Jul 2013 Link to this post

    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([]);
    });
  8. Evert
    Evert avatar
    1 posts
    Member since:
    Dec 2013

    Posted 19 Feb 2014 in reply to Alexander Valchev Link to this post

    $("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

  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 24 Feb 2014 Link to this post

    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!
  10. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 23 Dec 2014 in reply to Alexander Valchev Link to this post

    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!
     
    This is causing postback. How can we clear filters without postback ?
  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Dec 2014 Link to this post

    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!
     
  12. Ashish
    Ashish avatar
    1 posts
    Member since:
    Mar 2013

    Posted 26 May in reply to Alexander Valchev Link to this post

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

    is there any other way to achieve this.

  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 May Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready