“Undefined is not a function” error when using a KendoUI custom download containing only the grid with asp.mvc wrapper and Datasource

Question

I am trying to implement a custom Kendo download that contains only the grid in an ASP.NET MVC 4 project that uses razor for generating the grid and also uses server side code for generating the grid data. I have selected the applicable fields in the custom download page that generates these scripts: kendoScripts

I have included the scripts and css in the header tag of my _layout.cshtml page: renderedScripts

The code that calls the grid is bound to a simple model with two string properties(name, desc) and calls a controller action:

@(Html.Kendo().Grid<GridStandAloneTest.Models.GridModel>()
.Name("Grid")
.Sortable()
.Pageable()
.DataSource(ds => ds.Ajax().Read("GetPeople", "Home")
    .Batch(true)
    .ServerOperation(false))
.Columns(x => 
{
    x.Bound(c => c.Name);
    x.Bound(c => c.Salary); 
}))

When the page renders the grid is visible, but the controller action never gets called. I also get a "Uncaught TypeError: undefined is not a function" in the console. However, if I click on a column it does call the controller action, but then it returns it to a new tab with the JSON data under the URL.

The controller code looks like :

    public ActionResult GetPeople([DataSourceRequest]DataSourceRequest DataSource)
    {
        var people = new List<GridStandAloneTest.Models.GridModel>()
        {
            new GridStandAloneTest.Models.GridModel(){Name = "Jon", Salary = "50,000"},
            new GridStandAloneTest.Models.GridModel(){Name = "Joe", Salary = "100,000"}
        };

        DataSourceResult result = people.ToDataSourceResult(DataSource);

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Have you tried removing Batch(true) and ServerOperation(false) to see if that does anything? The only other thing I could think of. — Matt Millican
I tried that as well. Do you think I could be improperly building the package? I am about to go through the docs again to make sure I didn't miss any steps(like the jquery version you noticed) just to make sure. — CodeKiller
Maybe try using the full build - not your custom one, just to see if you still get the error? — Matt Millican
I can't remember if the screenshot (with the dark background) was there before or not, but I still don't see the aspnetmvc.min.js in there. Also, I just noticed jQuery is after Kendo - jQuery needs to come first. — Matt Millican

ZagNut ZagNut · Accepted Answer · 2015-04-09T16:05:18

You have at least 2 problems:

You're including jQuery multiple times. Make sure jQuery is included only once or the grid js will break.
When reproducing I noticed that it seems the Pager.js file wasn't included in the custom build even through I'd selected it. The error I was getting was an instanceof is not a function which pointed to where it was checking for Pager code.

“Undefined is not a function” error when using a KendoUI custom download containing only the grid with asp.mvc wrapper and Datasource

2 Answers