angularjs - 嵌套kendo网格-将detailInit与服务调用中的数据绑定(bind)

Question

我有一个 Angular 指令，它返回剑道网格数据源值(即gridDataDisplayed)。使用相同的数据源，我必须将其绑定(bind)到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”中的几列。我如何将其绑定(bind)到嵌套网格？

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

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

提前致谢。

Answer 1

您可以使用详细模板指令。方法如下:

<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