nested kendo grid - binding detailInit with data from service call - angularjs

Question

I have a angular directive which returns the kendo grid data source values (which is gridDataDisplayed). With the same data source, i have to bind it to a nested grid in detailInit.
scope.gridsource = new kendo.data.DataSource({
pageSize: options.pSize,
transport: {
read: function (options) {
scope.getDataMethod({ pageDetails: options }).then(function (gridDataDisplayed) {
options.success(gridDataDisplayed);
}, function (error) {
//error
});
}
},
detailInit: detailInitMethod
});
In the detailInitMethod i have the use the same data returned from service call and display only few columns from "gridDataDisplayed". How can i bind this to nested grid?
In my directive the template code is:
template: '<div><kendo-grid k-options="gridOptions" k-data-source="gridDataSource"></kendo-grid></div>',
Thanks in advance.

Answer 1

You can use the detail-template directive. Here is how:
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" k-data-source="gridDataSource">
<div k-detail-template>
<div kendo-grid k-options="detailGridOptions"></div>
</div>
</kendo-grid>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.gridDataSource = {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
};
$scope.mainGridOptions = {
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
}]
};
$scope.detailGridOptions = {
scrollable: false,
sortable: true,
dataSource: $scope.gridDataSource,
pageable: true,
columns: [
{ field: "City", title:"City", width: "56px" },
{ field: "Address", title:"Address", width: "110px" }
]
};
});
</script>
And a live demo: http://dojo.telerik.com/#korchev/UFIqa