Kendo Server Side Paging Posting to MVC Controller

Question

I'm attempting to use server side paging with the Kendo UI Grid, and I'm getting errors that don't seem to be documented anywhere.

The error I receive is:

Unhandled exception at line 11, column 15140 in kendo.all.min.js
0x800a138f JavaScript runtime error: Unable to get property 'slice' of undefined or null reference.

Per documentation and other examples I've found online, I bind my kendo grid using:

var postData = { "searchTerm" : searchTerm, "targetDB" : targetDB, "searchObj" : searchObj }

var grid = $("#grid1").kendoGrid({
    pageable: {
        pageSize: 40
    },
    dataSource: {
        error: function (e) {
            if (e.errors !== false) {
                $("#errorContainer").html(e.errors);
            }
        },
        transport: {
            read: {
                url: servicePath,
                dataType: "json",
                data: postData,
                type: "POST"
            }
        },
        serverPaging: true,
        schema: {
            total: "total",
            data: "data"
        }
    },
    dataBound: function (e) {
        var end = new Date().getTime();
        var time = end - start;
        console.log("Time taken: " + time);
        $("#loading").hide();
        $("#grid1").show();
        $("#totalTimeBadge").html(time + " milliseconds");
        $("#totalCountBadge").html(this.dataSource.total() + " items");
        $("#propertyCountBadge").html($(".k-header").length + " properties");
        logTimes(time, this.dataSource.total(), $(".k-header").length);
    }
});

The reason I use a post is (as you can probably guess) I'm implementing a search feature, and use the Kendo Grid to post the search criteria and the target DB I want to search on (there are two possibilities).

I have run the returning JSON through jslint and verified that it is valid JSON the structure of which is:

[{
    "total": 50053,
    "data": [{objects}]
}]

If I need to post a larger an actual excerpt of the JSON I can, it's a bit long to post here.

I was tracking the answer to this question here: Error while implementing basic paging in Kendo UI Grid in ASP.NET

But this question does not use the Kendo grid to post as well as retrieve items (no idea if that makes a difference) and I have also verified that the only answer to this question doesn't apply in my instance.

If I take out the total datafield and only return the raw data of my response, the grid binds just fine, but I need to incorporate server side paging.

Any ideas? Thanks!

Update

As per a suggestion below, I attempted to change my controller from returning a straight string to utilizing a DataSourceResult:

public ActionResult DataSourceResult()
    {
        string dataStr = "[{\"NAME\": \"0720-FI-1081\", \"DESCRIPTION\": \"HP FLARE HEADER DISTRIBUTION\"},{\"NAME\": \"0720-FIC-1002\",\"DESCRIPTION\": null}]";
        DataSourceResult result = new DataSourceResult();
        result.Data = dataStr;
        result.Total = 50;
        string json = JsonConvert.SerializeObject(result);
        return Content(json, "application/json");
    }

Same error.

Blunderfest Blunderfest · Accepted Answer · 2014-08-19T12:29:37

After swapping emails with Telerik support, here is what I found and works:

The JSON being returned can't be wrapped in [] although this is valid JSON. Instead, the following form works.

{
"Data":
    [
        {"Name":"John","Description":"None"},
        {"Name":"Jane","Description":"StillNone"}
    ],
    "Total":50,"AggregateResults":null,"Errors":null
}

This is what the DataSourceResult returns. A flat string that works as well is:

{
"Total": "50",
"Data": [
     {"NAME": "0720-FI-1081", "DESCRIPTION": "HP FLARE HEADER DISTRIBUTION"},
     {"NAME": "0720-FIC-1002","DESCRIPTION": null}
    ]
}

The key points here being that the entire JSON result cannot be wrapped in [], however the Data field of the response must be wrapped in [].

With the above strings, the grid declaration has to have a minor edit from the OP above:

schema: {
        total: "Total",
        data: "Data"
    }

As both fields are capitalized.

This is not documented anywhere, it's just something you have to know.

Cheers

Kendo Server Side Paging Posting to MVC Controller

2 Answers