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 file：

$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

详细信息GridGptions添加：

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

然后在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网格中的所有细节网格中只有一个选定的行？

2 个答案: