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

Automatically Clear Filter on MVC Grid

9 Answers 535 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.

Russell Solberg asked on 26 Jan 2010, 05:05 PM

I have a grid that allows the user to filter. If the user changes the search word that is used to populate the grid, the filter from the previous search remains in place.

    
            <label for="UserName"> 
        
                User Name:</label> 
        
            <%= Html.TextBox("UserName", "") %> 
        
            &nbsp; &nbsp; 
        
            <input id="btnSearch" type="submit" value="Submit" /> 
        
            </p> 
        
            <div class="<%= "t-" + Html.GetCurrentTheme() %>" style="width: 400px;"> 
        
            <%= Html.Telerik().Grid<ADGroup>()       
        
                    .Name("Groups") 
        
                    .Columns(columns=> 
        
                    { 
        
                        columns.Add(c => c.GroupName).Width(350); 
        
                    }) 
        
                    .Sortable() 
        
                    .Filterable() 
        
                    .Pageable(paging => 
        
                        paging.PageSize(20) 
        
                    ) 
        
                    .Ajax(ajax => ajax.Action("_GetGroups", "GroupSearch", new { userName = "John Doh" })) 
        
                    .BindTo((IEnumerable<ADGroup>)ViewData["Groups"]) 
        
            %> 
        
            </div>

I have triggered the rebind of the gird to occur when btnSearch is pressed.

    
                <% 
        
                Html.Telerik().ScriptRegistrar() 
        
                    .OnDocumentReady(() =>  
        
                    { 
        
                        %> 
        
                        var groupsGrid = $('#Groups').data('tGrid'); 
        
                        $('#btnSearch') 
        
                            .live("click", function() { 
        
                                var user = $('#UserName').val(); 
        
                                // rebind the related grid 
        
                                groupsGrid.rebind({ 
        
                                    userName: user 
        
                                }); 
        
                            }); 
        
                        <%  
        
                    }); 
        
                %>

I know that I can add the following code which will bring up the filter menu, but I'd prefer to be able to automagically clear the filter before the .rebind() call occurs.

    
            $('.t-grid-filter:first') 
        
                 .trigger('click');

9 Answers, 1 is accepted

answered on 27 Jan 2010, 04:12 PM

This seems to work. Rather than clearing out the text value, simply simulating the clicks on the clear button and the filter button.


//Clear UI Filter Text 
$('#Groups .t-clear-button').click(); 
$('#Groups .t-filter-button').click(); 
 
// rebind the related grid 
groupsGrid.rebind({ 
    userName: user 
});

answered on 01 Sep 2010, 06:42 PM

I am trying to implement a clear all filter button that resides in my grids toobar, and it doesn't appear to be working.

In my grid declaration:

.ToolBar(toolbar => toolbar.Custom().Text("Clear Filters").HtmlAttributes(new 
{ onclick = "clearFilters(event)" }))

My onclick callback:

function clearFilters(e) {

    var grid = $('#Matrix').data('tGrid');
    grid.rebind();
}

When debugging this with firefox I show that the grid's filterby = "", and the column that had the 
filter now has filters = [].

So, the filters are cleared in the code, but when the callback 
returns, the filters are still present.  I tried many of the 
suggestions on this post and many others, but it still doesn't work.  
Any suggestions?

I just tried on additional thing, if I move the button outside 
of the grid's toolbar, it appears to be clearing the text of
 the filter, but it doesn't actually remove the filter and show 
all the data without filters.

answered on 25 Nov 2011, 09:26 PM

Not sure about that, but this works from a button on the toolbar:

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

}