Datasource and complex JSON

[John]

 

Hi!
I want to fill a grid with a complex json returned from a webservice.
My json contains two things:
> "data": array with the records that will fill the grid
> "columns": array with the config(layout) of the grid

I have successfully filled the grid with the "data" by specifying the model data.
My problem is that i cannot  get the "columns" from the datasource. Is there a way to do it?

Here is my JSON

001.{
002.    "data": [
003.        {
004.            "id": 0,
005.            "firstname": "Hudson",
006.            "lastname": "Lynn",
007.            "gender": "male",
008.            "email": "[e-mail]",
009.            "phone": "699-434-2739",
010.            "address": "70 Delmonico Place, Roberts, New York",
011.            "birthday": "03/07/1968",
012.            "currency": "CHF"
013.        },
014.        {
015.            "id": 1,
016.            "firstname": "Michelle",
017.            "lastname": "Stanton",
018.            "gender": "female",
019.            "email": "[e-mail]",
020.            "phone": "699-374-6225",
021.            "address": "55 Gotham Avenue, Makena, Maryland",
022.            "birthday": "14/03/1965",
023.            "currency": "CHF"
024.        },
025.        {
026.            "id": 2,
027.            "firstname": "Marsh",
028.            "lastname": "Reilly",
029.            "gender": "male",
030.            "email": "[e-mail]",
031.            "phone": "699-546-0025",
032.            "address": "22 Mayfair Drive, Westmoreland, Nevada",
033.            "birthday": "17/07/1988",
034.            "currency": "CAD"
035.        }
036.    ],
037.    "columns": [
038.        {
039.            "field": "firstname",
040.            "title": "Frist Name",
041.            "width": 200,
042.            "attributes": {
043.                "class": "",
044.                "style": "text-align: left;"
045.            },
046.            "headerAttributes": {
047.                "class": "table-header-cell",
048.                "style": "text-align: left;"
049.            }
050.        },
051.        {
052.            "field": "lastname",
053.            "title": "Last Name",
054.            "attributes": {
055.                "class": "",
056.                "style": "text-align: left;"
057.            },
058.            "headerAttributes": {
059.                "class": "table-header-cell",
060.                "style": "text-align: left;"
061.            }
062.        },
063.        {
064.            "field": "gender",
065.            "title": "Gender",
066.            "attributes": {
067.                "class": "",
068.                "style": "text-align: left;"
069.            },
070.            "headerAttributes": {
071.                "class": "table-header-cell",
072.                "style": "text-align: left;"
073.            }
074.        },
075.        {
076.            "field": "email",
077.            "title": "e-mail",
078.            "attributes": {
079.                "class": "",
080.                "style": "text-align: left;"
081.            },
082.            "headerAttributes": {
083.                "class": "table-header-cell",
084.                "style": "text-align: left;"
085.            }
086.        },
087.        {
088.            "field": "phone",
089.            "title": "Phone Number",
090.            "attributes": {
091.                "class": "",
092.                "style": "text-align: right;"
093.            },
094.            "headerAttributes": {
095.                "class": "table-header-cell",
096.                "style": "text-align: right;"
097.            }
098.        },
099.        {
100.            "field": "address",
101.            "title": "Address",
102.            "attributes": {
103.                "class": "",
104.                "style": "text-align: left;"
105.            },
106.            "headerAttributes": {
107.                "class": "table-header-cell",
108.                "style": "text-align: left;"
109.            }
110.        },
111.        {
112.            "field": "birthday",
113.            "title": "Birthday",
114.            "attributes": {
115.                "class": "",
116.                "style": "text-align: center;"
117.            },
118.            "headerAttributes": {
119.                "class": "table-header-cell",
120.                "style": "text-align: center;"
121.            }
122.        },
123.        {
124.            "field": "currency",
125.            "title": "Currency",
126.            "attributes": {
127.                "class": "",
128.                "style": "text-align: center;"
129.            },
130.            "headerAttributes": {
131.                "class": "table-header-cell",
132.                "style": "text-align: center;"
133.            }
134.        }
135.    ]
136.}

Here is how i fill the datasource

01.var customersSource = new kendo.data.DataSource({
02.        transport: {
03.            read: {
04.                url: crudServiceBaseUrl + "/customers.json",
05.                dataType: "json"
06.            }
07.        },
08.        schema: {
09.            data: "data"
10.        }
11.    });

Here is my gridOptions

1.$scope.mainGridOptions = {
2.        dataSource: customersSource,
3.        //columns: customersSource.columns???,
4.        height: 500,
5.        scrollable: true,
6.        selectable: true
7.    };

[Atanas Korchev]

Hello,

It looks this got answered in stack overflow.

Regards,
Atanas Korchev
Telerik