Checkbox Column With kendoGridHeaderTemplate

[Scott Michetti]

Hello,

I have a kendo-grid-checkbox-column that needs a Select-All checkbox in the header. I could use the showSelectAll option but  the header also needs to have text in the cell. To accomplish this I use kendoGridHeaderTemplate. I am able to do this just fine, but I am unable to figure out how to set the checkbox to indeterminate. I created an "isChecked" variable to set the checkbox to checked or unchecked. Is there a value I can set to show the indeterminate state? Here is my code:

<kendo-grid-checkbox-column>        
        <ng-template kendoGridHeaderTemplate>          
            <div style="margin-bottom: -8px; margin-left: 5px;">
              <input class="k-checkbox" id="chkHeader" type="checkbox" [(ngModel)]="isChecked">
              <label class="k-checkbox-label"  for="chkHeader"></label>
            </div>
            <div style="margin-left: -4px;">{{myCustomText}}</div>
        </ng-template>
</kendo-grid-checkbox-column>

 

Thanks,

Scott

[Preslava]

Hello Scott,

In order to add a select-all checkbox to the Kendo Grid header template, one should utilize the kendoGridSelectAllCheckbox directive.

 <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox >
 <label class="k-checkbox-label" for="selectAllCheckboxId">Text</label>

Please, check the following Stackblitz example, where this is demonstrated in action:

https://stackblitz.com/edit/angular-ajpix8-vcgs4s?file=app/app.component.ts

 

Should you need further assistance, please do not hesitate to contact us.

Regards,
Preslava
Progress Telerik

[Scott Michetti]

Thank you for the quick response Preslava. I am now seeing the indeterminate checkbox, however I am using a virtual scroll(which I should have mentioned), so the checkbox does not display correctly in certain sections of the scroll. Is there a way to have the checkbox "look" at all the data, instead of just the slice that is in the current virtual scroll?

 

Thanks,

Scott

[Preslava]

Hello Scott,

In general, the select-all feature applies only to the data that is rendered on the current page.

However, it is possible to modify this behavior, by persisting the selection. There is a relevant example, that demonstrates how this works in combination with the select-all feature (example number 2).

When using these features, one should handle the select-all checkbox, as well as the collection of selected items, in order to achieve the desired result.

The following example demonstrates how to handle the Grid selection when the Select All checkbox and virtual scrolling are used:

https://stackblitz.com/edit/angular-bhqawm?file=app/app.component.ts

Let me know how this goes.

Regards,
Preslava
Progress Telerik

[Rory]

Is there an update for this? The checkboxes look tiny

[Martin Bechev]

Hi Rory,

Make sure that the theme version is compatible with the installed Grid package version:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

We recommend updating all Kendo packages to their latest versions, to benefit from the most recent bug fixes and fetures:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

Regards

[Scott Michetti]

Thanks again for the quick reply Preslava. This is exactly what I needed!!! I am now able to use the select-all feature in a virtual grid.

[Nazar]

Thank you Preslava, I needed to add the title to the checkbox, and your answer exactly what I need