Блог

Я пытаюсь сделать строку в сетке 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 невозможно щелкнуть знак плюс и просмотреть сведения для этой строки.

Есть ли способ отключить только флажок?

Я также обнаружил, что добавление ‘disabled’ к элементу checkbox не работает. Вероятно, это связано с тем, что сама строка все еще выбирается.

С помощью поддержки 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;
}