嵌套的kendo网格 - 绑定detailInit与来自服务调用的数据

Question

我有一个angular指令,它返回kendo网格数据源值(gridDataDisplayed).使用相同的数据源,我必须将它绑定到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
                });

在detailInitMethod中,我使用了从服务调用返回的相同数据,并且只显示了"gridDataDisplayed"中的几列.如何将其绑定到嵌套网格？

在我的指令中,模板代码是:

 template: '<div><kendo-grid k-options="gridOptions" k-data-source="gridDataSource"></kendo-grid></div>',

提前致谢.

Answer 1

您可以使用detail-template指令.方法如下:

<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>

还有一个现场演示:http://dojo.telerik.com/@korchev/UFIqa