Kendo Grid local datasource causing TypeError r is undefined

Question

I am creating a kendo grid that uses local datasouce with this code.

var jsondata = [{
    abc: "Star Wars: A New Hope",
    def: 1977,
    ghi: 1977,
    jkl: 1977,
    mno: 1977,
    pqr: 1977
}];

$("div#@code").Grid({
    dataSource: {
        data: jsondata,
        schema: {
            model: {
                fields: {
                    abc: { type: "string" },
                    def: { type: "number" },
                    ghi: { type: "number" },
                    jkl: { type: "number" },
                    mno: { type: "number" },
                    pqr: { type: "number" }
                }
            }
        },
        pageSize: 20
    },
    height: 430,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    autoBind: true,
    columns: [
            { title: 'abc', field: 'abc' },
            { title: 'def', field: 'def' },
            { title: 'ghi', field: 'ghi' },
            { title: 'jkl', field: 'jkl' },
            { title: 'mno', field: 'mno' },
            { title: 'pqr', field: 'pqr' },
       ],
    });

The .Grid is an extension of the kendoGrid function, because I needed to custom the grid. Inside that function I call

//     Initialize the grid.
kendo.ui.Grid.fn.init.call(that, element, options);

When I tested the code, the browser is giving me TypeError r is undefined. Which after I did my research, it is about the kendo grid trying to call dataSource update method that of course does not exist because I am using a local datasource.

Am I missing an option to set the kendo grid to not read the remote datasource and just use local datasource?

FYI the grid does not throw error and working just fine if the datasource is remote.

Yuliam Chandra Yuliam Chandra · Accepted Answer · 2014-03-20T13:54:21

I copy paste your code to jsbin http://jsbin.com/qowilugo/1/edit. I only needed to change 1 line of your code from

$("div#@code").Grid({

into

$("div#code").kendoGrid({

since Grid function, as you explained, is an extension / custom jquery function that you created. And the jsbin code is working properly.

You need to debug your extension / custom jquery function. Maybe there is a part of the code that doesn't comply with local data source, such as, setting the serverPaging, serverGrouping, transport options.

Kendo Grid local datasource causing TypeError r is undefined

1 Answers