Populating two nested grid in one call - angularjs

Question

I am using kendo-ui with AngularJS. I have a parent grid and on the expansion of the row I have to show two sub grids, for that I don't want to call server separately. I have developed a service which returns data of both grids, now I want to bind the data to the grid. How to do that? Here is the code:
$scope.mainGridOptions = {
columns: [
{ field: "id", title:"ID",width: "50px" },
{ field: "name", title:"Name", width:"200px" },
],
dataSource: {
transport: {
read: function (e) {
var params = {};
var dataObj = ServerAPIs.getStudents(params, function(){
e.success(dataObj.result);
},function(){
alert('something went wrong');
});
}
},
pageSize: 20,
},
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: true,
reorderable: true,
resizable: true,
detailInit: function(e) {
(function(e){
var params = {
"student-id" : e.data.id
};
var dataObj = ServerAPIs.getStudentDetails(params, function(data){
if(data.result.dataset1.length > 0){
//what to do here? how to access child grid1?
}
if(data.result.dataset2.length > 0){
//what to do here? how to access child grid2?
}
},function(){
alert('something went wrong');
});
})(e);
}
};
Here is the html:
<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
<div class='grid_loader'>
<br/>
<span class="spinner_forms"> </span>
<br/>
</div>
<div class='details' style='display:none'>
<div class="center-block" style="width: 800px;" kendo-grid k-options="grid1Options(dataItem)"></div>
<br />
<div class="center-block" style="width: 800px;" kendo-grid k-options="grid2Options(dataItem)"></div>
</div>
</div>

Answer 1

In Javascript, I selected child element using find method and initiated the grid.
detailInit: function(e) {
(function(e){
var params = {
"student-id" : e.data.id
};
var dataObj = ServerAPIs.getStudentDetails(params, function(data){
if(data.result.dataset1.length > 0){
e.detailRow.find(".child-grid-1").kendoGrid({
dataSource: {
data: data.result.dataset1,
},
columns: [//your columns here],
//other grid options
});
}
if(data.result.dataset2.length > 0){
e.detailRow.find(".child-grid-2").kendoGrid({
dataSource: {
data: data.result.dataset2,
},
columns: [//your columns here],
//other grid options
});
}
},function(){
alert('something went wrong');
});
})(e);
}
In html page, following modification needs to be made:
<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
<div class='grid_loader'>
<br/>
<span class="spinner_forms"> </span>
<br/>
</div>
<div class='details' style='display:none'>
<div class="child-grid-1" style="width: 800px;"></div>
<br />
<div class="child-grid-2" style="width: 800px;"></div>
</div>
</div>