Kendo UI Grid won't bind to data

Question

I've got a Kendo UI grid that won't load data. It was working and then I upgraded it to the latest version of Kendo UI. I went through the code and documentation and everything looks right. There are no errors and I know the data is getting to the grid (at least to the parse function in the dataSource).

Here is a JSFiddle that shows the error. http://jsfiddle.net/9J7T6/1/

I've hard-coded the data in the sample, but my actual code fetches it from a web service using JSON.

Here is the JS from the Fiddle...

var errSrc = new kendo.data.DataSource({

    data: {
        "total": 68178,
        "errors": [
          {
            "ErrorID": "57c1f4cc-87a7-4fff-9580-3543bba0902f",
            "ApplicationName": "MyApp",
            "HostName": "WEB05",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T21:44:54.53-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          },
          {
            "ErrorID": "70d27c9e-5b63-42b8-a464-818b14f20109",
            "ApplicationName": "MyApp",
            "HostName": "WEB06",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T21:44:52.83-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          },
          {
            "ErrorID": "77ce535d-b131-4dc6-8f87-7bd08f1d0a9c",
            "ApplicationName": "MyApp",
            "HostName": "WEB04",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T19:43:25.973-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          }
        ]
    },
    schema: {
        model: {
            ErrorID: { type: 'string' },
            ApplicationName: { type: 'string' },
            HostName: { type: 'string' },
            Message: { type: 'string' },
            Source: { type: 'string' },
            StatusCode: { type: 'number' },
            Time: { type: 'date' },
            Type: { type: 'string' },
            User: { type: 'string' }
        },
        parse: function (data) {
            // Use Sugar.js to parse the date
            $.map(data.errors, function (item) { item.Time = Date.create(item.Time); return item; });
            console.log(data);
            return data;
        },
        data: 'errors',
        total: 'total'
    },
    pageSize: 3,
    serverPaging: true,
    serverSorting: true
});

$(function () {

    $('#errs').kendoGrid({
        columns: [
            { field: 'ApplicationName', title: 'App', width: '120px', template: '<span title="#= ApplicationName #">#= ApplicationName #</span>', filterable: true },
            { field: 'HostName', title: 'Host', width: '80px' },
            { field: 'StatusCode', title: 'Code', width: '50px' },
            { field: 'Type', title: 'Type', width: '200px' },
            { field: 'Message', title: 'Error', template: '#= Message # <a href="/ElmahViz/Details/#= ErrorID #" target="elmah#= ErrorID #" class="details-link">Details...</a>' },
            { field: 'User', title: 'User', width: '100px' },
            { field: 'Time', title: 'Date', width: '100px', format: '{0: MM/dd/yyyy}' },
            { field: 'Time', title: 'Time', width: '100px', format: '{0: hh:mm tt}' }
        ],
        dataSource: errSrc,
        selectable: false,
        groupable: true,
        sortable: true,
        pageable: true,
        scrollable: true // enabled so that we can have fixed width columns.
    });

});

Any help is appreciated. Thanks.

Answer 1

Kendo UI uses errors internally (information here) and gets confused with your field called errors.

Try changing it to something else for example _errors as in this modification of your JSFiddle http://jsfiddle.net/OnaBai/9J7T6/3/

Or try redefining errors in the schema definition to something else for example _errors as in this modification of your JSFiddle http://jsfiddle.net/OnaBai/9J7T6/4/

Answer 2

Couple things. In the parse function, $.map returns an array. So change that to

var fixedData = $.map(data.errors, function(item) ...

Second, to get the total, and the dataset into the grid, you will need to change that

return data;

to something like

return { results: fixedData, total: data.total };

and then change data: 'errors', to data: 'results',.

Here is a working sample. http://jsbin.com/qewiq/1/edit