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

Filter on MVC Grid not working

8 Answers 241 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.

Ryan Hartzog asked on 05 Nov 2009, 09:32 PM

I am unable to get the filtering to work on the Grid. I have a simple action and simple grid rendering.

    
            public ActionResult Index()  
        
                    {  
        
                        IEnumerable<Store> stores = _storeRepository.GetAllStores();  
        
                        return View("Index", stores);  
        
                    }

The data renders properly and sorting and paging work as expected. The filter icon will show up, but the link is not active:

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Store>>" %> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
        
                <h2>Stores</h2> 
        
                 <%= Html.Telerik().Grid<Store>(Model)  
        
                       .Name("Grid")  
        
                       .Columns(columns => 
        
                       {  
        
                           columns.Add(c => c.StoreNumber).Title("Store #").Width(75).Filterable(true);  
        
                           columns.Add(c => c.AddressLine1).Title("Address 1").Filterable(false);  
        
                           columns.Add(c => c.PhoneNumber).Title("Phone #").Filterable(false);  
        
                       })  
        
                       .Sortable()  
        
                       .Pageable(page => page.PageSize(2))  
        
                            .Filterable()  
        
                %> 
        
            </asp:Content>

I have references to the javascript libraries in the site.master:

    
            <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
        
            <script src="../../Scripts/telerik.common.min.js" type="text/javascript"></script> 
        
            <script src="../../Scripts/telerik.grid.min.js" type="text/javascript"></script> 
        
            <script src="../../Scripts/telerik.grid.filtering.min.js" type="text/javascript"></script>

8 Answers, 1 is accepted

answered on 06 Nov 2009, 08:46 AM

Hello Ryan Hartzog,

The problem you are having is indeed rather strange. The grid is properly configured for filtering provided it has rendered the filtering icon. This can be due to:

JavaScript error - for some reason the filtering may fail to initialize properly. Do you see any JavaScript errors reported when clicking the filtering icon?
JavaScript files failed to load - please check whether the path to the corresponding files is correct and they load without issues. Use FireBug or Fiddler depending on your browser of choice.
Some CSS issue - it is possible that some CSS of your web site interferes with the grid's and as a result the filtering menu appears out of place. You can try temporarily disabling your CSS files to see if this would make a difference.

Let me know how it goes!

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 06 Nov 2009, 03:09 PM

firebugscripttab.jpg

firebughtmltab.jpg

Thank you for the reply. I have removed all other css and script dependencies and I get the same result. In FireBug all four script files load properly as you will see in the attached screenshots. The filter icon shows up, but is not an active link. I have tried both the minimized javascript files and the non-minimized from the Telerik Examples Scripts folder. The store object being passed in has its properties set with the proper data types, int and string respectively.

                    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Store>>" %>         
                     
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">         
                     
            <html xmlns="http://www.w3.org/1999/xhtml" >         
            <head runat="server">         
                <title>Index2</title>         
                <link href="../../Content/telerik.common.min.css" rel="stylesheet" type="text/css" />         
                <link href="../../Content/telerik.default.min.css" rel="stylesheet" type="text/css" />         
                     
                <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>         
                <script src="../../Scripts/telerik.common.js" type="text/javascript"></script>         
                <script src="../../Scripts/telerik.grid.js" type="text/javascript"></script>         
                <script src="../../Scripts/telerik.grid.filtering.js" type="text/javascript"></script>         
            </head>         
            <body>         
                <div>         
                <%= Html.Telerik().Grid<Store>(Model)         
                       .Name("Grid")         
                       .Columns(columns =>         
                        {         
                            columns.Add(c => c.StoreNumber).Title("Store #");         
                            columns.Add(c => c.PhysicalAddressLine1).Title("Address 1");         
                        })         
                       .Sortable()         
                       .Pageable()         
                       .Filterable()         
                %>         
                </div>         
            </body>         
            </html>         
                     

Sorting and paging work without issue. I have tried in IE 8.0.7600.16385, Chrome 3.0.195.27 and Firefox 3.5.4. I receive the same result in all three.

Accepted

answered on 09 Nov 2009, 08:10 AM

Hi Ryan Hartzog,

Thank you for pasting your code. It shows where the problem is. The grid requires a ScriptRegistrar component in order to output its client-side script. Please add the following lines after your grid declaration:

<%= Html.Telerik().ScriptRegistrar() %>

Then you need to remove the JavaScript files for the grid (telerik.common.js, telerik.grid.js and telerik.grid.filtering.js). The grid will register them automatically via the ScriptRegistrar.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 09 Feb 2010, 03:43 AM

view.png

code.png

Hi,

I also could not make Filtering work. On the 'code' image I register default telerik scripts, plus several more. On the view 'Filtering' option is visible, but not available.

Here is the grid declaration:

    
             <%= Html.Telerik().Grid(Model)  
        
                    .Name("CustomerGrid")  
        
                    .Columns(columns => 
        
                    {  
        
                        columns.Add(c => c.Id).Width(100);  
        
                        columns.Add(c => c.Name).Width(200);  
        
                        columns.Add(c => c.StatusCode);  
        
                        columns.Add(c => c.IntroductionDate).Format("{0:MM/dd/yyyy}").Width(200);  
        
                    })  
        
                    .Ajax(ajax => ajax.Action("GetCustomers", "Customer"))  
        
                    .Pageable()  
        
                    .Sortable()  
        
                    .Filterable()  
        
                    .Scrollable()  
        
                    %>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Filter on MVC Grid not working

8 Answers, 1 is accepted