This is a migrated thread and some comments may be shown as answers.
How to use dataSource.schema/kendoGrid.columns properties with complex JSON responses ?
5 Answers 1253 Views
This is a migrated thread and some comments may be shown as answers.
Vladimir
Top achievements
Rank 1
Vladimir asked on 16 Sep 2011, 04:21 PM
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.

5 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 19 Sep 2011, 09:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vladimir
Top achievements
Rank 1
answered on 19 Sep 2011, 06:39 PM
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 ?
0
Atanas Korchev
Telerik team
answered on 20 Sep 2011, 06:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vladimir
Top achievements
Rank 1
answered on 20 Sep 2011, 10:39 AM
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
0
Shahid
Top achievements
Rank 1
answered on 03 Mar 2014, 12:41 PM
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

Tags
Grid
Asked by
Vladimir
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Vladimir
Top achievements
Rank 1
Shahid
Top achievements
Rank 1
Share this question
or