如何在主要细节KendoUI网格中的所有细节网格中只有一个选定的行?

时间:2015-09-30 15:44:55

标签: angularjs kendo-ui grid master-detail

我有一个显示客户列表(主要部分)的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个用户。

我不知道是否可能(以及如何做到这一点)。 任何帮助,将不胜感激。 谢谢

2 个答案:

答案 0 :(得分:0)

详细信息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);      
};

答案 1 :(得分:0)

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

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