首页 > 解决方案 > 无法在自定义复选框 kendo-grid-checkbox-column 中显示全选

问题描述

我正在使用angularkendo,我在列标题中显示全选时遇到问题。这是我的代码:

app.component.html

...
<kendo-grid 
    scrollable="virtual"
    [height]=500
    [data]="data"
>
    <kendo-grid-column field="" title="No">
        <ng-template kendoGridCellTemplate let-rowIndex="rowIndex"><p>{{ rowIndex + 1 }}</p></ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="item" title="{{ 'COMMON.LABEL.FUNCTION_AUTHORITY' | translate }}">
    <kendo-grid-checkbox-column field="" title="Check all" showSelectAll="true">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" kendoCheckBox [ngModel]="dataItem.check" />
        </ng-template>
    </kendo-grid-checkbox-column>
</kendo-grid>
...

app.component.ts

import { data} from './data';
...
data: any[] = data;
...

数据.ts

export const data = [
    {name: "item1", check: true},
    {name: "item2", check: false},
    {name: "item3", check: false},
    {name: "item4", check: true},
    {name: "item5", check: true}
];

我在我的项目中执行此代码,但它没有在列标题中显示全选。请帮助我,并为我糟糕的英语感到抱歉。

标签: javascriptangulartypescriptkendo-uikendo-grid

解决方案


现在我发现我的问题的答案只需要删除kendoGridCellTemplate,所以我的代码

<kendo-grid-checkbox-column field="" title="Check all" showSelectAll="true">
    <ng-template let-dataItem>
        <input type="checkbox" kendoCheckBox [ngModel]="dataItem.check" />
    </ng-template>
</kendo-grid-checkbox-column>

这行得通


推荐阅读