Javascript runtime error: “object doesn't support property or method” in Internet Explorer

Question

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:

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?

Answer 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

Answer 2

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.