This is a migrated thread and some comments may be shown as answers.

Checkbox Column With kendoGridHeaderTemplate

5 Answers 875 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott Michetti
Top achievements
Rank 1
Scott Michetti asked on 14 Jan 2020, 08:07 PM

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

5 Answers, 1 is accepted

Sort by
0
Preslava
Telerik team
answered on 15 Jan 2020, 03:48 PM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott Michetti
Top achievements
Rank 1
answered on 15 Jan 2020, 04:05 PM

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

0
Accepted
Preslava
Telerik team
answered on 16 Jan 2020, 02:26 PM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott Michetti
Top achievements
Rank 1
answered on 16 Jan 2020, 07:00 PM
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.
0
Nazar
Top achievements
Rank 1
answered on 18 Feb 2021, 06:47 AM
Thank you Preslava, I needed to add the title to the checkbox, and your answer exactly what I need
Tags
Grid
Asked by
Scott Michetti
Top achievements
Rank 1
Answers by
Preslava
Telerik team
Scott Michetti
Top achievements
Rank 1
Nazar
Top achievements
Rank 1
Share this question
or