How to display kendo `kendoGridSelectAllCheckbox` in filter row?

Question

Below code add select all checkbox in header row and works as expected:

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

I tried to alter above code to add select all checkbox in filterable row but it seems not working:

 <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

The problem is the kendoGridSelectAllCheckbox has an internal dependency on kendoGridHeaderTemplate, hence you are not seeing any output rendered.

I have explained this in my below answer:

Angular content projection inside a KendoUI Grid

---

The solution to your problem is to use CSS to position the checkbox directly below the label, so that it gives the illusion of it present on the filter cell.

.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 Demo

---

If the above code does not help you then you can use a plain checkbox to achieve the filtering functionality.