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

【问题标题】：Kendo UI Angular make grid row not selectable without disabling master detailKendo UI Angular 在不禁用主细节的情况下使网格行不可选
【发布时间】：2020-10-25 18:05:30
【问题描述】：

我正在尝试使 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 函数来设置 k-state-disabled 类

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

这确实使该行无法选择，但它也会禁用主从功能。

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

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

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

【问题讨论】：

标签： angular kendo-ui kendo-grid

【解决方案1】：

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

在网格上使用[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;
}

【讨论】：