This is a migrated thread and some comments may be shown as answers.

Grid data not binding with Transport

4 Answers 284 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 06 Oct 2016, 09:52 PM

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?

4 Answers, 1 is accepted

Sort by
0
Ryan
Top achievements
Rank 1
answered on 07 Oct 2016, 04:42 PM

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 }
                    }
                }
            }

0
Rosen
Telerik team
answered on 10 Oct 2016, 07:43 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
shahid
Top achievements
Rank 1
answered on 04 Mar 2017, 09:08 AM

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");

0
Dimiter Topalov
Telerik team
answered on 07 Mar 2017, 02:43 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Rosen
Telerik team
shahid
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or