Grid data not binding with Transport

3 posts, 0 answers
  1. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 06 Oct Link to this post

    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?

  2. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 07 Oct Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 10 Oct Link to this post

    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.
     
Back to Top