clear filters button in the toolbar?

[Alexandre Jobin]

hi! is it possible to add a button to clear all the filters? i wanted to add one in the footer toolbar

thanks!

[Atanas Korchev]

Hello Alexandre Jobin,

Yes it is possible. Here is how to achieve it:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(toolbar => toolbar.Custom().Text("Clear Filters").HtmlAttributes(new {onclick="clearFilters(event)"}))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_Filtering", "Grid"))
        .Pageable()
        .Sortable()
        .Filterable(filtering => filtering
            .Filters(filters => filters
                .Add(o => o.Customer.ContactName).StartsWith((string)ViewData["startsWith"])
        ))
%>
    <script type="text/javascript">
    function clearFilters(e) {
        e = new $.Event(e);
        e.preventDefault();
        var grid = $('#Grid').data('tGrid');
        grid.filter('');
    }
    
    </script>

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Alexandre Jobin]

how can i put it on the bottom toolbar?... maybe as an icon?

alex

[Atanas Korchev]

Hi Alexandre Jobin,

Currently you cannot add content to the grid footer.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Diiimo]

Hi Atanas,

how can i reset the filter dialogs and the icons on the columns?

Regards,
Timo

[SEAN]

I found that code given here did result in all the data being shown without filtering, but the filters were still set in the UI, so I added a couple of things to clean them up too:

function clearFilters(e) {
    e = new $.Event(e);
    e.preventDefault();

    //First clear the filter dialogs - took this from clearClick in telerik.grid.filtering.js
    $('div.t-filter-options')
        .find('input')
        .removeAttr('checked')
        .removeClass('t-state-error')
        .not(':radio')
        .val('')
        .end()
        .end()
        .find('select')
        .removeClass('t-state-error')
        .find('option:first')
        .attr('selected', 'selected');

    //Now iterate through the columns and clear the filters - this will cause the filter method to reset the filter icons
    var grid = $('#Grid').data('tGrid');
    $.each(grid.columns, function (index, value) {
        if (this.filters != null) this.filters = null;
    });

    //Now the filter method will do the rest
    grid.filter('');
}

[Dan]

Thank you Sean! This was useful.

Dan