在一次调用中填充两个嵌套网格

Question

我正在使用 kendo-ui 和 AngularJS。我有一个父网格，在扩展行时我必须显示两个子网格，因为我不想单独调用服务器。我开发了一个服务，其中 returns 两个网格的数据，现在我想将数据绑定到网格。怎么做？这是代码：

$scope.mainGridOptions = {
        columns: [ 
                   { field: "id", title:"ID",width: "50px" },
                   { field: "name", title:"Name", width:"200px" },                     
                   ],
        dataSource: {               
            transport: {
                read: function (e) {                        
                    var params = {};
                    var dataObj = ServerAPIs.getStudents(params, function(){
                        e.success(dataObj.result);                          
                    },function(){
                        alert('something went wrong');
                    });     
              }
           },
           pageSize: 20,
        },
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        filterable: true,
        reorderable: true,
        resizable: true,
        detailInit: function(e) {
            (function(e){                   
                var params = {
                        "student-id" : e.data.id
                };                  
                var dataObj = ServerAPIs.getStudentDetails(params, function(data){
                    if(data.result.dataset1.length > 0){ 
                        //what to do here? how to access child grid1?
                    }                       
                    if(data.result.dataset2.length > 0){
                        //what to do here? how to access child grid2?
                    }                       
                },function(){
                    alert('something went wrong');
                });
            })(e);
        }
    };

这里是 html:

<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
    <div class='grid_loader'>
        <br/>
            <span class="spinner_forms">&nbsp;</span>
        <br/>
    </div>
    <div class='details' style='display:none'>
        <div class="center-block" style="width: 800px;"  kendo-grid k-options="grid1Options(dataItem)"></div>
        <br />
        <div class="center-block" style="width: 800px;"  kendo-grid k-options="grid2Options(dataItem)"></div>
    </div>
</div>

Answer 1

在Javascript中，我使用find方法选择了子元素并启动了网格。

detailInit: function(e) {
        (function(e){                   
            var params = {
                    "student-id" : e.data.id
            };                  
            var dataObj = ServerAPIs.getStudentDetails(params, function(data){
                if(data.result.dataset1.length > 0){ 
                     e.detailRow.find(".child-grid-1").kendoGrid({
                         dataSource: {
                                data: data.result.dataset1,
                            },
                            columns: [//your columns here],
                            //other grid options
                        });
                }                       
                if(data.result.dataset2.length > 0){
                    e.detailRow.find(".child-grid-2").kendoGrid({
                         dataSource: {
                                data: data.result.dataset2,
                            },
                            columns: [//your columns here],
                            //other grid options
                        });
                }                       
            },function(){
                alert('something went wrong');
            });
        })(e);
    }

在html页面，需要进行如下修改：

<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
    <div class='grid_loader'>
        <br/>
            <span class="spinner_forms">&nbsp;</span>
        <br/>
    </div>
    <div class='details' style='display:none'>
        <div class="child-grid-1" style="width: 800px;"></div>
        <br />
        <div class="child-grid-2" style="width: 800px;"></div>
    </div>
</div>

在一次调用中填充两个嵌套网格

Populating two nested grid in one call

angularjs

kendo-grid