nested kendo grid - binding detailInit with data from service call

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