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