How to use dataSource.schema/kendoGrid.columns properties with complex JSON responses ?

[Vladimir]

Hello, Kendo-Team.
I have a question about complex JSON responses: Say, I get  a response like this and want to use this data for creating a Grid:

01.{

02.    "items" : [

03.    ....

04.    ....

05.    ....

06.    {

07.      "fileName": "Pragmatic Bookshelf - CoffeeScript.Jul.2011.ENG.pdf",

08.      "folderPath": "I:\\eBooks",

09.      "absolutePath": "I:\\eBooks\\Pragmatic Bookshelf - CoffeeScript.Jul.2011.ENG.pdf",

10.      "size": {

11.        "bytes": 3573254,

12.        "MBytes": 3.41

13.      },

14.      "mtime": {

15.        "UTC": "\/Date(1315848420988)\/",

16.        "shortDate": "12.09.2011"

17.      }

18.    },

19.    ....

20.    ....

21.    ....

22.    ],

23.    "totalItems": 540

24.}

so how should I use <code>dataSource.schema</code> and/or <code>kendoGrid.columns</code> properties to get size.bytes and/or mtime.UTC ? How to correctly parse this type of DATETIME info via JS ? Templates ?

I only know, I should use <code>dataSource.schems.items</code> to point out the Array with objects (in my case it's "items")

01.dataSource({

02.    transport: {

03.        ....

04.    },

05.    schema : {

06.        data: "items",

07.        total : function(data) {

08.            // if pagination is enabled - it won't work

09.            // without declaring this function

10.            return data.totalItems;

11.        }

12.    }

13.});

without defining any columns, I get size and mtime columns with [object Object] in it.

[Atanas Korchev]

Hello Vladimir,

You can specify the field to which a column is bound like this:

columns :  [
    {  field: "size.bytes", title: "Bytes" }
]

As for the date - you need to parse its value and display it via template. Something like this:

function toDate(value) {
    var dateRegExp = /^\/Date\((.*?)\)\/$/;
    var date = dateRegExp .exec(value);
    return new Date(parseInt(date[1]));
}


columns: [
   {  template: '<#= kendo.toString( toDate(mtime.UTC), "dd MM yyyy" ) #>' , title: "UTC"}
]

]

All the best,
Atanas Korchev
the Telerik team

[Vladimir]

Hello, Atanas. First of all, thank you for the solution.

So - please correct me if i'm wrong - dataSource.schema.model is available only for XML Data, right? I ask just to be sure...

..and I've got another questions...

The only proper way to sort DateTime-Data in the grid (at least in my case) is the use of 'sort' property by the initializing of DataSpurce

1.var myData = new kendo.data.DataSource({

2.    ....

3.    sort: {field: "mtime.UTC", dir : "desc"}

4.    });

Transfortming date-fields via templates & kendo.toString() method makes it look better, more human-like, but the sorting becomes pretty senseless, because it will not treated like a DateTime anymore, rather like a String

Is there a way or any customizations to get sorting working well ?

[Atanas Korchev]

Hello Vladimir,

 Not at the time being. Dates serialized as string are sorted as strings. You need real JavaScript date objects so they are properly sorted. Currently though the kendo data source will not convert /Date()/ strings to date objects. We are looking into implementing this in a future release.

Regards,
Atanas Korchev
the Telerik team

[Vladimir]

Hello Atanas, I think I found the Solution, at least it seems to be the one.

I put the toDate function, that you mentioned above into DataSource.schema.parse

01.schema : {

02.    type: 'json',

03.    parse : function(data) {

04.        $.each(data.items, function(i, val){

05.            val.mtime.UTC = toDate(val.mtime.UTC);

06.        });

07.        return data;

08.    },

09.    data:  function(data) {

10.        return data.items;

11.    },

12.    total : function(data) {

13.        return parseInt(data.totalItems, 10);

14.    }

And I also defined the "field" property in columns

01.columns: [

02.    ....

03. 

04.    {

05.        title: "Modified",

06.        field: "mtime.UTC",

07.        template: '<#= kendo.toString(mtime.UTC, " MMM. dd, yyyy") #>',

08.        width : "150px"

09.    }

10.]

Now sorting works as it should

[Shahid]

HI i have almost same kind of issue , i have a field like below which works fine 
columns :  [    {  field: "size.bytes", title: "Bytes" }] 

but the problem comes when i try to make the above column un-editable, remember that all other columns are editable using editable: true,
so how do i define above column in my schema to set editable: false, as i tried like 
schema: {
                            model: {
                                fields: {
                                    size.bytes: { type: 'number' },
                                    
                                }
                            }
                        }
but i get error

Thanks,
Shahid