如何在筛选行中显示剑道`kendoGridSelectAllCheckbox`？

Question

下面的代码添加选择标题行中的所有复选框并按预期工作：

 <kendo-grid-checkbox-column [showSelectAll]="true">
                    <ng-template kendoGridHeaderTemplate>
                        <input class="chk-status" kendoGridSelectAllCheckbox />
                    </ng-template>
                    <ng-template kendoGridCellTemplate let-idx="rowIndex">
                        <input class="chk-status" [kendoGridSelectionCheckbox]="idx" />
                    </ng-template>
                </kendo-grid-checkbox-column>
    </kendo-grid-checkbox-column>

我尝试更改上面的代码以在可过滤行中添加全选复选框，但它似乎不起作用：

 <kendo-grid-checkbox-column [showSelectAll]="true">
                    <ng-template kendoGridHeaderTemplate>
                        <span>Ready to sent</span>
                    </ng-template>
                    <ng-template kendoGridFilterCellTemplate>
                        <input class="chk-status" kendoGridSelectAllCheckbox />
                    </ng-template>
                    <ng-template kendoGridCellTemplate let-idx="rowIndex">
                        <input class="chk-status" [kendoGridSelectionCheckbox]="idx" />
                    </ng-template>
                </kendo-grid-checkbox-column>
    </kendo-grid-checkbox-column>

Answer 1

问题是

kendoGridSelectAllCheckbox

对

kendoGridHeaderTemplate

有内部依赖性，因此您看不到任何渲染的输出。

我已经在下面的回答中解释了这一点：

KendoUI 网格内的角度内容投影

---

问题的解决方案是使用 CSS 将

checkbox

直接放置在标签下方，这样就会给人一种它出现在过滤器单元格上的错觉。

.filter-all-checkbox th[rowspan="1"][colspan="1"],
.filter-all-checkbox th[rowspan="1"][colspan="1"] .k-cell-inner,
.filter-all-checkbox th[rowspan="1"][colspan="1"] .k-link{
  overflow: visible !important;
}

.filter-all-checkbox .checkbox-container {
  position: relative;
  overflow: visible;
}

.filter-all-checkbox .checkbox-custom {
  position: absolute; 
  top:45px;
  left: 1px;
}

HTML：

  <kendo-grid-checkbox-column>
    <ng-template kendoGridHeaderTemplate>
      <div class="checkbox-container">
        <span>Ready to sent</span>
        <input
        class="checkbox-custom"
          type="checkbox"
          kendoCheckBox
          id="selectAllCheckboxId"
          kendoGridSelectAllCheckbox
          [state]="selectAllState"
          (selectAllChange)="onSelectAllChange($event)"
        />
      </div>
    </ng-template>
    <ng-template kendoGridFilterCellTemplate>
    </ng-template>
  </kendo-grid-checkbox-column>

Stackblitz 演示

---

如果上面的代码对您没有帮助，那么您可以使用普通复选框来实现过滤功能。