如何在主细节 KendoUI 网格中的所有细节网格中只选择一个行？

Question

我有一个显示客户列表的 KendoUI 网格（主要部分）。每个客户都可以有一个用户列表（详细信息部分）

Html 页数：

<kendo-grid options="mainGridOptions" k-on-change="onSelectedCustomerChanged({selected:data})">
<div k-detail-template>
    <div>
        <div kendo-grid k-options="detailGridOptions(dataItem)" k-on-change="onSelectedUserChanged({selected:data})"></div>
    </div>
</div>

js文件：

$scope.mainGridOptions = {
  toolbar: ["excel"],
  columns: [{ field: "Fullname"}, { field: "Country.CountryName"}],
  selectable: "row",
  dataSource: {
      transport: {
          read: function (e) {
              $http.post("Services/Customer.svc/GetCustomers").
                  success(function (data, status, headers, config) {
                      e.success(data.d);
                  }).
                  error(function (data, status, headers, config) {
                      alert('something went wrong');
                      console.log(status);
                    });
            }
        }
    }
};
$scope.detailGridOptions = function (dataItem) {
    return {
        selectable: "row",
        dataSource: dataItem.Users,                       
        columns: [{ field: "UserName" },{ field: "Email" },{ field: "FullName" }]
    };
};

我的数据看起来像：

customer 1  France
  user1   user1@domain.tld  user 1
  user2   user2@domain.tld  user 2
  user3   user3@domain.tld  user 3
customer 2  U.K.
  user4   user4@domain.tld  user 4
  user5   user5@domain.tld  user 5

我可以点击客户行和用户行。

当我点击用户 4 时，整行被选中。如果我单击用户 2，则会选择用户 2 的行，但仍选择用户 4 的行。我想一次只选择 1 个用户。

我不知道这是否可能（以及如何做到）。任何帮助，将不胜感激。谢谢

Answer 1

详细GridOptions添加：

change: $scope.onDetailChange

和方法：

$scope.onDetailChange = function (arg) {
    var grid = arg.sender;

    if ($scope.selectedStageRow != null && $scope.selectedStageRow.attr("data-uid") !== this.select().attr("data-uid")) {
        $scope.selectedStageRow.removeClass("k-state-selected");
    }
    var selected = this.select();
    $scope.selectedStageRow = selected;
    $scope.selectedItem = grid.dataItem(selected);      
};

Answer 2

您可以使用更改事件来检测何时选择了一行：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-change

然后在更改事件中，如果选择了一行，找到所有其他详细信息网格并使用 clearSelection() 方法取消选择任何当前选择的行：

change: function(e) {
  if (this.select().length == 0) return;

  var curGrid = this.element;
  $("#grid .k-detail-cell .k-grid").each(function(idx, elem){
      if ($(elem)[0] != curGrid[0]){
       //clear previous selection 
        $(elem).data('kendoGrid').clearSelection()
      }
  });                          
}

DEMO

如何在主细节 KendoUI 网格中的所有细节网格中只选择一个行？

How to have only one selected row across all details grid in a master detail KendoUI grid?

angularjs

kendo-ui

grid

master-detail