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;
}