如何将dataSource分配给DetailgridOptions（dataItem）

Question

我有一个剑道网格，每行都有按钮，点击按钮打开每个按钮点击不同网格的弹出窗口，弹出网格的每一行都有一个详细的teamplate，其中包含另一个网格

现在的问题是如何在调用detailGridOptions（dataItem）函数时将dataSource分配给第3个网格。

var p=0;
$scope.detailGridOptions = function (dataItem) {
            return {
                
                dataSource: new kendo.data.DataSource({
                    schema: {
                        model: {
                            id: 'Id',
                            fields: {
                                Id: { type: 'number' },
                                PId: { type: 'number' },
                                ParentId: { type: 'number' },
                                SLength: { type: 'number' },
                                SVolume: { type: 'number' },
                                Status: { type: "String" }
                            }
                        }
                    }
                }),

                    //new kendo.data.dataSource({
                    //read: function (options) {
                    //    options.success($scope.splGridData);
                    //},
                    filter: [
                      { field: "ParentId", operator: "neq", value: p },
                       { field: "ParentId", operator: "eq", value: dataItem.Id }
                    ],
                }),
                columns: [
                    {
                        field: "SLength",
                        width: "55px"
                    },
                    {
                        field: "SVolume",
                        width: "55px"
                    }

                ]
            };
        }
        ciSetUp.GetCurveDetailsData(Id).then(function () {
            //debugger;
            if (ciSetUp.getcurvedata.ReturnedResult.length > 0) {
                $scope.CgridDataSource.data(ciSetUp.getcurvedata.ReturnedResult);

                ciSetUp.GetCurveDetailsData(Id).then(function () {
                    $scope.detailGridOptions.data(ciSetUp.getcurvedata.ReturnedResult);
                });
            }
        });

<div id="details-container" kendo-window="modal" k-title="'Pump Details'" k-visible="false" k-modal="true"> <!--style="height:370px;width:600px;"-->

        <dl>
            <dt id="pn"> Name : </dt>
            <dt id="pk"> {{P}} </dt>
            <dt id="sn">Status : </dt>
            <dt id="sk"> {{Status}} </dt>
        </dl>

        <div class="tabcontainer">
            <div class="cphPadd">

                <div class="rowdiv">

                    <kendo-grid options="CgridOptions"  k-data-source="CgridDataSource" style="margin-bottom:10px">
                        <div k-detail-template>
                            <div  kendo-grid k-options="detailGridOptions(dataItem)"></div>
                        </div>

                    </kendo-grid>

                </div>

            </div>

            <button id="b3" class="button" ng-click="modal.close()">Cancel</button>
            <button id="b2" class="button">Save</button>
            <button id="b1" class="button" ng-click="modal.reload()">Refresh </button>

        </div>

    </div>
</div>

我将从ciSetUp获取数据。

Answer 1

$scope.detailGriddataSource = new kendo.data.DataSource({
            filter: [
                   { field: "ParentId", operator: "neq", value: p },
            ],
            schema: {
                model: {
                    id: 'Id',
                    fields: {
                        Id: { type: 'number' },
                        PId: { type: 'number' },
                        ParentId: { type: 'number' },
                        SLength: { type: 'number' },
                        SVolume: { type: 'number' },
                        Status: { type: "String" }
                    }
                }
            }
        }),

        
        $scope.detailGridOptions = function (dataItem) {
            var newData = $scope.detailGriddataSource.data().filter(function (el) {
                return el.ParentId == dataItem.Id && el.ParentId != 0;
            });
            if (newData.length > 0) {
                var Childdata = new kendo.data.DataSource({
                    data: newData,
                });
                return {
                    dataSource: Childdata,                   
                    columns: [
                        {
                            field: "SLength",
                            width: "55px"
                        },
                        {
                            field: "SVolume",
                            width: "55px"
                        }

                    ]
                };
            }
            
        }