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

Grid - Filtering not working with Sorting relates to Browser Compatibility View

4 Answers 172 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kathy
Top achievements
Rank 1
Kathy asked on 07 Sep 2012, 05:09 AM
I have simple Kendo UI Grid in partialview to display information using AJAX binding.

Sample Code Below
     @(Html.Kendo().Grid(Model)
          .Name("Grid")
          .Columns(columns => {
               columns.Bound(p => p.Id).Groupable(false).Hidden();
               columns.Bound(p => p.Name);
        })
       .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("Value_Read", "Value"))
                          )
        .Pageable()
        .Sortable()
        .Filterable()

   I have problem with filtering.  When I clicks on Filtering icon, it works as sorting.
   If I add filtering only without sorting, then it works.
   Only way to make filtering working along with sorting is by turning on Compatibility View
  
   Below is pictorial explanation.  Hope this helps.

       launch partialview with Grid.  You see filtering icon next to name. 
       when hover over filtering icon to click, the icon disappears. 
       Tries to click filtering icon, sorting will work. 
      
  




Do same step as above.  But this time I turn on Compatibility View (Notice red circle)
This times, when I hover over on Filtering icon, I can see filtering icon.
Filtering and sorting are working here.


I have IE9. 
I ran this with Firefox, I cannot make filtering works regardless what.

I added below as order suggested.
        <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.web.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.aspnetmvc.min.js")"></script>


I also have jQuery 1.7.2 and 1.8.20

Please let me if there is any information I need to provide.  I really spent huge amount of time to figure out this issue. 

Thank you in advance.





4 Answers, 1 is accepted

Sort by
0
Bryan Corazza
Top achievements
Rank 1
answered on 02 Oct 2012, 12:52 AM
For me this was a css issue.  I removed the default site css and it works like a charm.  In particular it was the th a{position: relative} line 544 of Site.css property that causes the filtering to not function properly.  once this is removed, everything should work with the grid.
0
D.Kermott
Top achievements
Rank 1
answered on 11 Oct 2012, 03:27 PM
Did the site.css change fix this for you?

My site.css was completely redone.  There is no "position: relative" or any "position" or "relative" anywhere in any styles (besides the kendo ones).

I am using IE 8.0.7601.17514

Sorting works.
Filters do not.  I click on the Filter icon and the filter menu never shows.

If I turn on Compatibility mode it then works.
0
Jon
Top achievements
Rank 1
answered on 14 Nov 2012, 10:10 PM
I'm having the same issue and I do not have any competing CSS rules that would be causing the problem. Would be really interested in a solution for this.
0
D.Kermott
Top achievements
Rank 1
answered on 15 Nov 2012, 02:58 PM
I had a jquery version mismatch.  I was trying to use a newer jquery version.  I switched back to the version that the version of KendoUI uses and it started working.
Tags
Grid
Asked by
Kathy
Top achievements
Rank 1
Answers by
Bryan Corazza
Top achievements
Rank 1
D.Kermott
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Share this question
or