MVVM - Bind JSON Child Elements To Kendo UI Controls - mvvm

Question

i want to bind child nodes to two different kendo ui controls , but my Kendo Data source fetches the data from service in single call ,
var viewModel = kendo.observable {
dataSource : new kendo.data.DataSource({
transport: {
read: {
url: '/data/auras',
dataType: "json",
type: 'GET',
}
},
schema: {
/////////
},
});
}
My JSON response result looks like this
[
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters": {
"batter": [
{
"id": "1001",
"type": "Regular"
},
{
"id": "1002",
"type": "Chocolate"
},
{
"id": "1003",
"type": "Blueberry"
},
{
"id": "1004",
"type": "Devil's Food"
}
]
},
"topping": [
{
"id": "5001",
"type": "None"
},
{
"id": "5002",
"type": "Glazed"
},
{
"id": "5005",
"type": "Sugar"
},
{
"id": "5007",
"type": "Powdered Sugar"
},
{
"id": "5006",
"type": "Chocolate with Sprinkles"
},
{
"id": "5003",
"type": "Chocolate"
},
{
"id": "5004",
"type": "Maple"
}
]
}
]
Here I have to bind batter ( is child Element) to One Gridview && topping ( is child Element) to another Gridview ,

Answer 1

You could use schema.parse to split your JSON result into two lists. Something like:
var batters = new kendo.data.DataSource({
data: []
});
var toppings = new kendo.data.DataSource({
data: []
});
var allData = new kendo.data.DataSource({
transport: {
read: {
url: '/data/auras',
dataType: "json",
type: 'GET',
}
},
schema: {
parse: function (data) {
batters.data(data[0].batters.batter);
toppings.data(data[0].toppings);
return data;
}
},
});
allData.fetch();
var viewModel = kendo.observable({
batters: batters,
toppings: toppings
});