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

0
votes

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.

disabledrow

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.

1
angularkendo-uikendo-grid

1 Answers

0
votes

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