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

Question

I am trying to make a row in a Kendo UI grid unselectable.

The grid itself is a master detail grid with the following 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>

I added a isDisabled function which sets k-state-disabled class

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

This does make the row unselectable, however it also disables the master detail functionality.

So at 1, it's not possible to click the plus sign and view the detail for this row.

Is there a way to disable just the checkbox?

I also found that adding 'disabled' to the checkbox element doesn't work. This is probably because the row itself is still selectable.

Answer 1

With the help of Kendo support there is a solution, so if it can help others here is the setup.

Use [rowClass] on the grid and the following function:

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

And the following css:

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