Grid data not binding with Transport

[Ryan]

Hello, I'm having trouble binding my JSON data to my grid when using the transport / schema method.  I am able to bind my data to the grid when doing a JSON.parse (data) and manually selecting the datasource.data = data in my grid.

The code I am having trouble with is:

function listView(card) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Personnel/GetPersonnel",
                dataType: "json",
                type: "GET",
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    firstName: { editable: false },
                    lastName: { editable: true }
                }
            }
        }
    });
    $(card).find('.kendo-grid').kendoGrid({
        dataSource: dataSource
    });
    dataSource.read();
}

I have been successful with the following implementation:

function kendoDataAsync(card) {
    $(card).find('.kendo-grid').each(function (i, ele) {
        var route = "/Personnel/GetPersonnel";

        $.getJSON(route).done(function (json) {
            var datas = new kendo.data.DataSource({ data: JSON.parse(json) });
            var grid = $(ele).data('kendoGrid');
            datas.read();
            grid.setDataSource(datas);
        });
    });
}

My JSON data looks like this BEFORE I do JSON.parse, which is where I believe my issue may lie:

"[{\"firstName\":\"Ron\",\"lastName\":\"Roles\",\"id\":\"1\"}]

AFTER a JSON.parse my data is a bit more familiar:

[ {

"firstName":"Ron",
"lastName":"Roles",
"id":1

} ]

Is my schema wrong?  Am I not binding correctly?

[Ryan]

I'm getting a feeling my problem rests in 1 or 2 areas.  First, my JSON seems a little funky but it is a bit hard to tell what Kendo is doing with received JSON.  The JSON resting in the success call of the transport function is:

["[{"firstName":"Ron","lastName":"Roles", "id": "1"}]"]

Not exactly what I was expecting.

Second, I don't have a defining element to this schema.  It's simply a blank array.  How would I define the schema ID to repeat on with this data?

            schema: {
                model: {

                    id: ?????,
                    fields: {
                        firstName: { editable: false },
                        lastName: { editable: true }
                    }
                }
            }

[Rosen]

Hello Ryan,

Looking at the provided information, it seems that the server is returning the data as a string instead of a JSON value. You should check the server  end point implementation returning the data and modify it to return well formatted JSON. If this is not possible you may consider specifying the schema.parse function in which to use the JSON.parse to parse the string to a valid JavaScript object. 

Regards,
Rosen
Telerik by Progress

 

 

[shahid]

i have same issue grid data is not binding the only difference is i am using local data that is returned from db as child object

 

 $("#" + psGridId).kendoGrid({
            dataSource: {
                data: psGridArrayModified,
                pageSize: 20,
                schema: {
                    total: function (result) {
                       
                        var totalCount = result.length;
                        return totalCount;
                    }
                }
            },
            columns: psGridArrayColumns,
            height: psHeight,//resizeLayoutGridDiv("#" + psGridId, "", psHeight, this, window),//
            scrollable: isScrollable,
            pageable: true,

        }).data("KendoGrid");

[Dimiter Topalov]

Hello Shahid,

If the structure of the response is a complex object (as opposed to an array of items), and the data items' collection is the value of some property of the response object, the field, from the server response, containing the data items, should be specified in the dataSource.schema.data configuration option, e.g.:

// server response
{
  dataContainer: [ /* collection of data items */ ],
  totalCount: 20 // total number of data items
}

// dataSource configuration:
...
schema {
  data: "dataContainer",
  total: "totalCount"
},
...

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress