0

I'm using kendo grids and they work fine for the CRUD operations. Now, I wanted to add filtering by adding the .Filterable() option to the grid's specification. Here's some code:

<div id="datagrid">
    @(Html.Kendo().Grid<SustIMS.Models.ConcessionModel>()
    .Name("datagrid_Concessions")
    .Columns(columns =>
    {
        columns.Bound(c => c.Code).Title("Code");
        columns.Bound(c => c.Description).Title("Description");
        columns.Bound(c => c.TrafficOpeningDate).Title("Traffic Opening Date");
        columns.Bound(c => c.CreationDate).Title("Creation Date");
    })
    .HtmlAttributes(new { style = "height: 534px;" })
    .Filterable() // here's the filterable option
    .Selectable()
    .Events(e => e.Change("onChange"))
    .Pageable(pageable => pageable
        .Refresh(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("GetConcessions", "MasterData"))
    )
    )
</div>

The grid renders perfectly and now little filter icons show on the grid's column headers:

img

But when I click one, the popup opens for a half second and the error is thrown. I'm using Visual Studio 2010 and the debugger shows a popup with javascript runtime error: object doesn't support property or method 'addBack'.

Also, it opens the file kendo.all.min.js with an highlight on a line of code where a method addBack is.

NOTE: I've tested on Chrome and Firefox and it works fine. The issue only exists when using Internet Explorer (version 11).

Any help?

chiapa
  • 4,362
  • 11
  • 66
  • 106
  • which `kendo.all.min.js` version you used. – Jaimin Jul 30 '14 at 11:02
  • @Jaimin, how can I see the file version? The Kendo UI is `Kendo UI v2014.1.528` – chiapa Jul 30 '14 at 11:09
  • Create '.Model' in `datasource` i think that why grid does not load the correct filter operators. – Jaimin Jul 30 '14 at 11:17
  • @Jaimin, with what parameters? Also, I'm looking at [this](http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization) and I can't see how I could make mine work – chiapa Jul 30 '14 at 11:23

2 Answers2

1

Make sure you have Jquery-1.8.1.min.js or higher version of jquery in your page.Because addBack is added in 1.8.

Try like this,

 @(Html.Kendo().Grid<SustIMS.Models.ConcessionModel>()
    .Name("datagrid_Concessions")
    .Columns(columns =>
    {
        columns.Bound(c => c.Code).Title("Code");
        columns.Bound(c => c.Description).Title("Description");
        columns.Bound(c => c.TrafficOpeningDate).Title("Traffic Opening Date");
        columns.Bound(c => c.CreationDate).Title("Creation Date");
    })
    .HtmlAttributes(new { style = "height: 534px;" })
    .Filterable() // here's the filterable option
    .Selectable()
    .Events(e => e.Change("onChange"))
    .Pageable(pageable => pageable
        .Refresh(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Model(model =>     <--- Add this
         {
           model.Id(m => m.Id);
           model.Field(m => m.Code);
           model.Field(m => m.Description);
         })
        .Read(read => read.Action("GetConcessions", "MasterData"))
    )
    )

See this DEMO : http://jsbin.com/emuqazEz/4/edit

Jaimin
  • 7,964
  • 2
  • 25
  • 32
  • I'm sorry but unfortunately, the issue remains the same – chiapa Jul 30 '14 at 11:36
  • @chiapa can you try this with `IE10` because it's working fine in my `IE11`. – Jaimin Jul 30 '14 at 12:48
  • Yeah, I think I'll try that. Meanwhile, +1! – chiapa Jul 30 '14 at 13:08
  • @chiapa let me know if it's working than it's browser problem. – Jaimin Jul 30 '14 at 13:14
  • I've tried IE10 and the error subsists. It also throws the exact same error and opens the `kendo.all.min.js` in the same place as before. Maybe it has to do with the version of, I don't know, `Kendo UI` or just the `kendo.all.min.js`... help please, it is really annoying since I don't want to code some custom filters that will take me a long time when there's a built in funcionality to do it. – chiapa Jul 30 '14 at 13:44
  • @chiapa can you give me list of `js` that add in your page. it may help to resolved this issue. – Jaimin Jul 31 '14 at 10:20
  • 1
    @chiapa Make sure you have `Jquery-1.8.1.min.js` or higher version of `jquery` in your page.Because `addBack` is added in `1.8`. – Jaimin Jul 31 '14 at 10:55
  • Hmm, mine is `JQuery-1.7.1.min.js`. I think that may be it! I'll try to upgrade it – chiapa Jul 31 '14 at 11:09
  • Jaimin, you are awesome. It works now. Please add that to your answer so I can accept it. Many many thanks! – chiapa Jul 31 '14 at 11:13
  • @chiapa Glad it help you. If you have any concern then let me know. – Jaimin Jul 31 '14 at 11:20
  • Jaimin, could you please please check [this other question](http://stackoverflow.com/questions/25062785/kendo-grid-toolbar-template-issue) I just posted? Thanks again – chiapa Jul 31 '14 at 15:24
0

I just tested in IE11 and filtering works fine.

From Kendo UI troubleshooting:

Problem:

Object doesn't support property or method 'kendoGrid' (in Internet Explorer 9+)

Solution:

Make sure jQuery is not included more than once in your page. Remove any duplicate script references to jQuery. Include all required Kendo JavaScript files.

This is a simmilar problem to yours so I'd check all my javascript files.

cah1r
  • 1,751
  • 6
  • 28
  • 47
  • Thanks for your answer. Before posting my question, I've obviously researched for a while and the I've already checked for duplicate jQuery references and have the `kendo.all.min.js` script file added, which includes every kendo control: no luck so far – chiapa Jul 22 '14 at 15:07
  • He's asking if you reference jQuery more than once, not kendo. Look at your ` – Brett Jul 29 '14 at 15:04