如何禁用剑道网格复选框列？

Question

如何禁用 kendo-grid-checkbox-column？

我试过了

• [disabled]="true"
• [attr.disabled]="true"
• disabled ="true"
• disabled
• readonly

但是没有什么可以帮助禁用下面的列

<kendo-grid-checkbox-column   width="50" showSelectAll="true">
        </kendo-grid-checkbox-column>

Answer 1

您可以使用 Grid rowClass 输入并提供一个函数，该函数将返回“k-disabled”类（或任何其他会阻止用户与给定行交互的自定义​​类），用于传递一些条件，例如：

public isDisabled(args) {
  return {
       'k-disabled': args.dataItem.UnitsOnOrder === 0
   }; 
}

我希望这会有所帮助。

========OR=========

<kendo-grid-checkbox-column>
<ng-template kendoGridCellTemplate let-dataItem let- 
rowIndex="rowIndex" >
<div class="{{dataItem.UnitsOnOrder === 0 ? 'k-disabled' : ''}}">
  <input [kendoGridSelectionCheckbox]="rowIndex" />
</div>
</ng-template>

在最近的 Kendo UI 主题版本中，CSS 类从 k-disabled 更改为 k-state-disabled

资源：https://www.telerik.com/forums/kendo-angular-grid---row-selection

Answer 2

您可以通过指定自定义模板并向[disabled] 属性添加条件来生成禁用的复选框。

 <kendo-grid-checkbox-column width="80"  [locked]="true">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >

        <input  *ngIf="!dataItem.IsNew"
                [disabled]="dataItem.IsNew === true"
                type="checkbox"
                class="k-checkbox"
                id="checkbox-{{rowIndex}}"
                [kendoGridSelectionCheckbox]="rowIndex"
                />  
        <label class="k-checkbox-label"
            for="checkbox-{{rowIndex}}">
        </label>
      </ng-template>
    </kendo-grid-checkbox-column>

这将呈现一个 Kendo 复选框，该复选框将根据您上面指定的条件被禁用。

如果要在标题中显示全选复选框，则需要将此模板添加到复选框列：

       <ng-template kendoGridHeaderTemplate >
            <input kendoGridSelectAllCheckbox type="checkbox"
                class="k-checkbox"
                id="headerCheckbox"
            />
            <label class="k-checkbox-label"
                        for="headerCheckbox"
                ></label>
       </ng-template>