This is a migrated thread and some comments may be shown as answers.

clear filters button in the toolbar?

6 Answers 187 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

6 Answers, 1 is accepted

Accepted

answered on 15 Jun 2010, 07:40 AM

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.

answered on 25 Nov 2011, 09:22 PM

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()

.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('');

}