我如何始终在 Master - Detail Kendo 网格行扩展上调用函数？答案

【问题标题】：How can i always call a function on Master - Detail Kendo grid row expansion?我如何始终在 Master - Detail Kendo 网格行扩展上调用函数？
【发布时间】：2020-06-11 18:35:14
【问题描述】：

我在 AngularJS 的 Kendo Grid 中使用 Master detail。这是代码的设置：在cshtml中是：

        <script type="text/x-kendo-template" id="template">                                                  
                   <div>
                        <div class="orders"></div>
                   </div>                                                   
        </script>

在 AngularJS 控制器中是

      The MasterRowId is the id of the Column in the Master row. So the Master grid is a grid with 
   columns Id and  name

    $scope.getorders = function (masterRowId)
    {           
        myservice.getorders(masterRowId)
            .then(function (result) {
                for (var j = 0; j < result.data.length; j++)
                    $scope.ordergroupdata.push(result.data[j]);                    
            });

    }

在我的主网格定义中 ......

        detailTemplate: kendo.template($("#template").html()),
        detailInit: $scope.detailInit,

$scope.detailInit的定义是

    $scope.detailInit = function (e)
    {
        $scope.MasterRowId = e.data.Id;                       
        $scope.getorders ($scope.MasterRowId); 

        var orderdata = $scope.ordergroupdata;
        var orderdatasource = new kendo.data.DataSource({                
            transport: {
                read: function (e) {
                    e.success(orderdata);
                },
                update: function (e) {
                    e.success();
                },
                create: function (e) {
                    var item = e.orderdata;
                    item.Id = orderdata.length + 1;
                    e.success(item);
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        OrderId: { type: 'string'},                                                   
                    }
                }
            },                
        });
        e.detailRow.find(".orders").kendoGrid({
            dataSource: orderdatasource,                                      
            columns: [
                { field: "OrderId", title: "OrderId" },                         
            ]
        });
    }

问题是，如果我点击第一行，我可以根据我的 MVC 操作方法中的 MasterRowId 检索数据。所以如果我点击第一行并且 MasterRowId 是例如 10 ，那么我得到一个 OrderId 为 "1234" 。我可以单击 MasterRowID 为 15 的第二行，它将检索“8231”的 OrderId，但是如果我返回第一行，详细信息网格中的数据（OrderId）实际上是第二行的数据，所以它的“8321”不是“1234”。如何始终调用 $scope.detailInit 以便我可以返回 MVC Action 方法并始终使用该 MasterRowId 检索该特定行的正确数据？一旦我展开该行并移动到另一行，该行就不再调用 detailsInit 了吗？

【问题讨论】：

标签： angularjs kendo-grid

【解决方案1】：

detailInit 仅在第一次展开时调用，但您可以使用每次展开明细表时调用的detailExpand。

官方示例：

<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
  detailExpand: function(e) {
    console.log(e.masterRow, e.detailRow);
  }
});
</script>

文档：detailExpand

官方示例：detailExpand example

【讨论】：

detailExpand 似乎没有返回列中的值。那么我需要获取 uid 然后获取行详细信息吗？ e.data.Id 不再可用？
console.log(e.sender.dataItem(e.masterRow)) console.log(e.sender.dataItem(e.detailRow))