1
votes

I have problem in loading json data in kendo ui grid. I am able to load data in data grid as per response1 because db-table has multiple records the values are perfectly loaded in grid.If db contains only one record its not getting loaded.In kendo ui i have mentioned schema model for multiple records. I have load dynamically as per response.

Note in my webservice : Response2 does is just json object

Response 1 contains array of object.

How to load without mentioning schema in kendo ui grid?

How to implement dynamic schema in kendo ui grid?

My responses samples are:

Response1:

{"dataFile":[{"dataFileKey":"LLf38e8826-e86c-4b8e-ba76-5e9a036e9481","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"62"},{"dataFileKey":"LLf6ec3702-3714-4723-afdd-dd43cc97ed9e","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"56"},{"dataFileKey":"LL78df7a13-8de3-43e8-8976-9fd7513267d3","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"65"},{"dataFileKey":"LLb1efa732-1110-412d-b3b6-1b774397f5fe","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"55"},{"dataFileKey":"LLc87dfb0b-8f3c-4214-9e93-c879ec291fcf","dataFileName":"sample_results.xls","experimentID":"47","id":"52"},{"dataFileKey":"LLe78010d1-a6d4-4666-83d3-e10883cad64e","dataFileName":"ANdroid.rtf","experimentID":"47","id":"80"},{"dataFileKey":"LLdd323ac7-f11a-4211-acc7-b6f24e4c9b97","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"66"},{"dataFileKey":"LL322664c0-6834-4410-b09e-66b215a5a39c","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"63"},{"dataFileKey":"LL18eea7cd-fcf7-4e72-ab83-fd0eaaaf28dc","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"59"},{"dataFileKey":"LL8813caea-2bd8-406c-813d-820ad89a36b2","dataFileName":"UI .txt","experimentID":"47","id":"71"},{"dataFileKey":"LL0a58e6b5-44c5-44be-808c-a36edfc52157","dataFileName":"dynamodb-dg.pdf","experimentID":"47","id":"61"},{"dataFileKey":"LL84bf6b13-43f6-4b98-af33-3610fc04f30d","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"51"},{"dataFileKey":"LLa25825ce-0a87-403b-94fb-f6165eb9e8d5","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"64"},{"dataFileKey":"LL6647ad1e-8d8c-4891-b64a-9eced150b377","dataFileName":"sample_results.xls","experimentID":"47","id":"68"},{"dataFileKey":"LLf14ba2c7-7898-4392-92d6-b47ca08f9d63","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"67"},{"dataFileKey":"LL1a99399e-c266-4c5b-ba39-b1fdc5e073c5","dataFileName":"10.10-si.dynamicrange-1k.2.EDS","experimentID":"47","id":"57"},{"dataFileKey":"LLb2a68fcd-2e74-4257-8c8b-93e3463e7681","dataFileName":"dynamodb-dg.pdf","experimentID":"47","id":"60"}]}

Response 2:

{"dataFile":{"dataFileKey":"LL25586c00-d95f-41c8-ad49-370dfd29b68a","dataFileName":"ANdroid.rtf","experimentID":"30","id":"78"}}

I tried so far:

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource : {
            type     : "json",
            transport: {
                read: "/lexaserver/rest/datafiles/all"
            },
            schema   : {
                data: "dataFile"
            },
            pageSize : 10
        },
        height     : 200,
        sortable   : true,
        reorderable: true,
        resizable  : true,
        pageable   : true,
        columns    : [
            {
                field: "id",
                title: "Data File ID",
                width: 110
            },
            {
                field: "dataFileName",
                title: "File Name",
                width: 110

            },
            {
                //  field: "dataFileKey",
                title   : "File Key",
                width   : 110,
                template: "<a class='download-files' fname=${dataFileName} key='${dataFileKey}' href=''>download file</a>",
            }
            //  { command: { text: "Download", click: showDetails }, title: " ", width: 30 }
        ]
    });
});
1

1 Answers

0
votes

The problem is that your service is returning the data in different formats depending if you have one or many records. Kendo UI expects that it always have the same.

Options:

  1. Modify your service for always returning the same format.
  2. Implement a function that upon reception of the data checks for format and convert it into a common one.

Example of approach 2, change schema definition in DataSource to:

schema   : {
    parse: function (d) {
        if (d.dataFile) {
            return d.dataFile;
        } else {
            return [ d ];
        }
    }
},

Where I check if I received data has d.dataFile and returns it, otherwise returns an array with the content of the data received.