Kendo UI Angular 在不禁用主细节的情况下无法选择网格行

Question

我正在尝试使 Kendo UI 网格中的一行不可选择。

网格本身是一个主从网格，具有以下 html：

<kendo-grid 
[kendoGridBinding]="myData" 
[data]="gridData" 
[selectable]="selectableSettings" 
kendoGridSelectBy 
[selectedKeys]="mySelectedKeys"
[rowClass]="isDisabled"
>

<kendo-grid-checkbox-column width="40" [ngClass]="{'k-state-selected': false}">
</kendo-grid-checkbox-column>

<kendo-grid-column field="jobDisplayName" title="Job Display Name">
</kendo-grid-column>

<kendo-grid-column field="nrItems" title="Nr Items in MID">
</kendo-grid-column>

<kendo-grid-column field="status" title="status">
</kendo-grid-column>

<ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex">
    <app-ab-status-tasks-grid [tasks]="dataItem.tasks"></app-ab-status-tasks-grid>
</ng-template>
</kendo-grid>

我添加了一个 isDisabled function 设置 k-state-disabled class

    public isDisabled(args) {
  return {
       'k-state-disabled': (<ActiveJob>args.dataItem).jobStatus != selectableState
   };  
}

这确实使该行不可选择，但它也禁用了主从细节功能。

因此在 1 处，无法单击加号并查看该行的详细信息。

有没有办法只禁用复选框？

我还发现将“禁用”添加到复选框元素不起作用。 这可能是因为该行本身仍然是可选的。

Answer 1

在 Kendo 支持的帮助下，有一个解决方案，所以如果它可以帮助其他人，这里就是设置。

在网格上使用 [rowClass] 和以下 function：

rowCallback(context: RowClassArgs) {    
  return {        
    'DisableRowSelection': !canBeOveridden
  };
}

以及以下 css：

.k-grid .k-grid-content tr.DisableRowSelection td:not(.k-hierarchy-cell) {
  opacity: 0.6;
  pointer-events: none;
}