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>

我添加了一个设置 k-state-disabled 的 isDisabled 函数 class

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

这确实使该行无法选择，但它也禁用了主详细信息功能。

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

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

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

Answer 1

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

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

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

Kendo UI Angular 在不禁用主细节的情况下使网格行不可选

Kendo UI Angular make grid row not selectable without disabling master detail

kendo-ui

kendo-grid

angular