This is a migrated thread and some comments may be shown as answers.
Filter on MVC Grid not working
8 Answers 210 Views
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
Top achievements
Rank 1
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

Sort by
0
Atanas Korchev
Telerik team
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:
  1. JavaScript error - for some reason the filtering may fail to initialize properly. Do you see any JavaScript errors reported when clicking the filtering icon?
  2. 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.
  3. 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.
0
Ryan Hartzog
Top achievements
Rank 1
answered on 06 Nov 2009, 03:09 PM
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.
0
Accepted
Atanas Korchev
Telerik team
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.
0
Ryan Hartzog
Top achievements
Rank 1
answered on 09 Nov 2009, 04:08 PM
Thank you for sticking with me Atanas, I appreciate the help.  You are right on the money.  One more question, is there a way to keep template columns from being filterable?  They don't seem to have a filterable attribute associated with them, therefore it causes a javascript error when trying to use templates and filters.
0
Atanas Korchev
Telerik team
answered on 09 Nov 2009, 04:14 PM
Hello Ryan Hartzog,

Could you please paste here your grid declaration? A I am asking you for this because template columns are supposed to not be filterable by default and I couldn't reproduce the problem you are describing. Thanks beforehand.

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.
0
Ryan Hartzog
Top achievements
Rank 1
answered on 09 Nov 2009, 04:20 PM
Please disregard, was a mistake on my part.  It is working as intended, thank you again.
0
Cookie Monster
Top achievements
Rank 1
answered on 09 Feb 2010, 03:43 AM
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()  
        %> 
0
Atanas Korchev
Telerik team
answered on 09 Feb 2010, 08:36 AM
Hi Cookie Monster,

The ScriptRegistar should be put at the end of your page after all Telerik UI Components. This is a mandatory requirement because those UI components must register with the ScriptRegistrar before it is rendered in the page.

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Tags
Grid
Asked by
Ryan Hartzog
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Ryan Hartzog
Top achievements
Rank 1
Cookie Monster
Top achievements
Rank 1
Share this question
or