Grid data not binding with Transport

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    17 posts
    Member since:
    Oct 2016

    Posted 06 Oct 2016 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
    17 posts
    Member since:
    Oct 2016

    Posted 07 Oct 2016 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. Rosen
    Admin
    Rosen avatar
    3246 posts

    Posted 10 Oct 2016 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.
     
  4. shahid
    shahid avatar
    2 posts
    Member since:
    May 2016

    Posted 04 Mar Link to this post

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

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    550 posts

    Posted 07 Mar Link to this post

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