Select All check box on Kendo-Grid isn't making checkboxes "checked"

[Kevin]

Hi,

I am using Kendo Grid in angular. I've requirement for adding a checkbox to each row grid as well as "Select All" checkbox. Upon loading, I also have to "disabled" or "checked" checkboxes programmatically. I was able to achieve this using below "kendo-grid-checkbox-column" markup. However, the issue is with "Select All" checkbox, it doesn't select-deselect any check boxes upon clicking on them. I am not sure if I am missing anything here and appreciate any help on this. Below is the screen-shot of my grid, as you can see "Select All" checkbox is checked but it isn't selecting any checkbox, 2 checkboxes which are "disabled" and "checked" are set programmatically on loading.

 

Below is is "kendo-grid-checkbox-column" mark-up I am using, I also tried "kendo-grid-column" template but no success.

    <kendo-grid-checkbox-column [width]="40" [showSelectAll]="true">

        <ng-template kendoGridHeaderTemplate >

            <input type="checkbox" KendoCheckBox kendoGridSelectAllCheckbox/>

        </ng-template>        

        <ng-template kendoGridCellTemplate let-dataItem>

            <input type="checkbox" KendoCheckBox [disabled]="dataItem.isMapped" [checked]="dataItem.isMapped" />

        </ng-template>        

    </kendo-grid-checkbox-column>

[Zornitsa]

Hi Kevin,

Thank you for the provided details, screenshot, and code snippet.

In general, the <kendo-grid-checkbox-column> component provides a showSelectAll property, which can be used to enable the built-in select-all feature for the columns. On that note, in case the built-in select-all feature is enabled, there is no need for any additional configurations to be implemented (like configuring a separate select-all checkbox through the kendoGridSelectAllCheckbox directive).

For more details and a runnable demo demonstrating this scenario, please refer to the following article from our documentation:

• https://www.telerik.com/kendo-angular-ui/components/grid/selection/row-selection/#toc-select-all-checkbox 

On the other hand, the mentioned kendoGridSelectAllCheckbox directive can be used in separate cases when the select-all checkbox is desired to be custom and manually implemented in the header template of the <kendo-grid-checkbox-column> particularly. However, in order for the functionality to work properly and apply the checked states in this case, the state of the custom checkbox should also be manually updated accordingly in the selectedKeysChange event of the Grid for example:

 <kendo-grid
       ...
       [(selectedKeys)]="mySelection"
       (selectedKeysChange)="onSelectedKeysChange()">
       <kendo-grid-checkbox-column>
           <ng-template kendoGridHeaderTemplate>
                <input type="checkbox" kendoCheckBox kendoGridSelectAllCheckbox [state]="selectAllState">
            </ng-template>
      </kendo-grid-checkbox-column>
 </kendo-grid>

public selectAllState: SelectAllCheckboxState = 'unchecked';
public mySelection = [];

// Updating the state based on the currently checked items
public onSelectedKeysChange(): void {
     const len = this.mySelection.length;

    if (len === 0) {
           this.selectAllState = 'unchecked';
    } else if (len > 0 && len < this.pageSize) {
           this.selectAllState = 'indeterminate';
    } else {
           this.selectAllState = 'checked';
    }
}

Here is a StackBlitz example to better illustrate this case:

• https://stackblitz.com/edit/angular-7qpegs 

A possible scenario for this particular implementation can be when the select-all feature should apply for the Grid rows that are rendered on all pages, not only on the current one:

•  https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-selecting-all-items/ 

Nevertheless, from what I can observe in the shared code snippet, it seems that a combination of both approaches is configured on your side. However, given the above information, in case the built-in select-all feature is desired to be implemented, the code snippet should have the following modifications applied, i.e. the additional configurations in the <kendo-grid-checkbox-column> will not be necessary:

<kendo-grid-checkbox-column [showSelectAll]="true" [width]="40"></kendo-grid-checkbox-column>

For better understanding, I am linking below a StackBlitz example that demonstrates this approach as well:

• https://stackblitz.com/edit/angular-qgbvce 

I hope the provided information sheds some light on the matter.

Regards,
Zornitsa
Progress Telerik