kendo UI DataSource and complex JSON - kendo-ui

Question

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 schema.data.
My problem is that i how to get the "columns" (from the JSON) from the datasource so i can set the grid properties in my gridOptions.
Is there a way to do it?
Here is my JSON
{
"data": [
{
"id": 0,
"firstname": "Dalton",
"lastname": "Holden",
"gender": "male",
"email": "daltonholden#tellifly.com",
"phone": "871-407-2973",
"address": "22 National Drive, Brenton, Louisiana",
"birthday": "21/04/1965",
"currency": "GBP"
},
{
"id": 1,
"firstname": "Allyson",
"lastname": "Odom",
"gender": "female",
"email": "allysonodom#tellifly.com",
"phone": "922-548-2725",
"address": "44 Quincy Street, Thynedale, Georgia",
"birthday": "28/08/1961",
"currency": "CHF"
},
{
"id": 2,
"firstname": "Sweet",
"lastname": "Branch",
"gender": "male",
"email": "sweetbranch#tellifly.com",
"phone": "880-593-2244",
"address": "81 Fenimore Street, Veguita, Missouri",
"birthday": "08/08/1953",
"currency": "AUD"
}
],
"columns": [
{
"field": "firstname",
"title": "Frist Name",
"width": 200,
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "lastname",
"title": "Last Name",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "gender",
"title": "Gender",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "email",
"title": "e-mail",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "phone",
"title": "Phone Number",
"attributes": {
"class": "",
"style": "text-align: right;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: right;"
}
},
{
"field": "address",
"title": "Address",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "birthday",
"title": "Birthday",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
},
{
"field": "currency",
"title": "Currency",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
}
]
}
And here is my code:
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
}
});
$scope.mainGridOptions = {
dataSource: customersSource,
//columns: Here it should be something like --> customersSource.columns,
height: 500,
scrollable: true,
selectable: true
};

Answer 1

The schema will only take care of fetching and parsing the data that your DataSource needs in order to create views, filter, sort, etc.
There is no built in way of handling "hybrid" content coming from one Ajax-request.
You make a workaround, though. Use the requestEnd event, access the missing data, and save it for later.
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
},
requestEnd: function(e) {
// According to the documentation, this gives you a reference to the datasource instance itself.
this.whatever = e.response.columns;
}
});
Now you can use this thing for later.
$scope.mainGridOptions = {
dataSource: customersSource,
columns: customersSource.whatever,
height: 500,
scrollable: true,
selectable: true
};