Kendo Grid Will not populate with server side data

Question

I cannot get Kendo Grid to populate from server side data.

I have a grid builder function as as follows:

    var build = function (carrier, date) {
    var urlBase = 'my base url';

    var datasource = new kendo.data.DataSource({
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        schema: {
            model: {
                id: 'Id',
                fields: {
                    StatementDate: { type: "string", editable: false },
                    CobDate: { type: "string", editable: false },
                    //lots more fields
                    Status: { type: "string", editable: false },
                    Matched: { type: "boolean", editable: true }
                }
            }
        },
        transport: {
            read: function (options) {
                var address = urlBase + '/' + carrier + '/' + date;
                $.ajax({
                    url: address,
                    type: "POST",
                    data: JSON.stringify(options.data),
                    contentType: "application/json",
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            },                
            //update function omitted
            parameterMap: function (data, operation) {
                if (operation == "read") {
                    return JSON.stringify(data)
                }
            },
            change: function (e) {
                var data = this.data();
                console.log(data.length); // displays "77"
            }
        }
    });

    return datasource;
};

return {
    build: build
}

Grid Definition

elem.kendoGrid({
            columns: [
                { field: "StatementDate", title: "State Date", width: 125 },
                { field: "CobDate", title: "COB Date", width: 100 },
            //lots more fields
            { command: ["edit"], title: "&nbsp;", width: "85px"}],
            resizable: true,
            sortable: true,
            editable: "inline",
            columnMenu: true,
            filterable: true,
            reorderable: true,
            pageable: true,
            selectable: "multiple",
            change: this.onSelectedRecordChanged,
            toolbar: kendo.template($('#' + templateName).html()),
            scrollable: {
                virtual: true
            },
            height: 800
        });

I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.

If I break point on the AJAX call back. I see the correct results.

The grid is bound with data bind. The datasource is a property on a viewmodel.

<div id="grid" data-bind="source: dataSource"></div>

At the start of the app. I create view model

var viewModel= kendo.observable(new GridViewModel(...

and bind

kendo.bind($('#grid'), viewModel);

If I look at the datasource attached to the grid, I see data for the page as expected

This has previously worked fine when data was client side.

I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.

Example response content from server

{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}

Any help very much appreciated.

user2509738 user2509738 · Accepted Answer · 2013-10-21T12:25:12

1

votes

I found the cause in datasource schema missing

{ data: 'Data', total: 'Total' }

Kendo Grid Will not populate with server side data

1 Answers