nested kendo grid - 绑定detailInit来自服务调用的数据

Question

我有一个角度指令，它返回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