Select all works to unselect some but not to select or clear all

Question

I created a kendo grid with multiselect enabled:

    <kendo-grid
      [reorderable]="false"
      class="border"
      [kendoGridBinding]="data"
      [selectable]="{ enabled: true, checkboxOnly: false, mode: 'multiple' }"
      scrollable="none"
    >
      <kendo-grid-checkbox-column
        [showSelectAll]="true"
        [width]="40"
        [columnMenu]="false"
        headerClass="col-header"
      ></kendo-grid-checkbox-column>
      <kendo-grid-column
        title="Person Name"
        headerClass="font-weight-bold col-header"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.lastName }}, {{ dataItem.firstName }}
        </ng-template>
      </kendo-grid-column>

I'm using showSelectAll on the kendo-grid-checkbox-column in order to enable selection of all of the grid rows via a checkbox in the header. I've seen this work in the Kendo for Angular demos in the documentation.

For me, clicking the header checkbox does nothing when nothing is selected:

When I select a row manually, clicking the header checkbox when it shows a '-' sign unselects selected rows:

When I select all of the rows manually (shift clicking them works), clicking the header checkbox with a check mark in it also doesn't work:

So it doesn't work for selecting all or unselecting all, but works for unselecting some.

Any ideas what I'm doing wrong and what I should try to get this to work?

Thanks!

Answer 1

It's really hard to tell what might be causing the problem based on the provided information - I just created a StackBlitz demo with the latest official versions of the Kendo packages, and the provided markup, and it seems to be working as expected:

https://stackblitz.com/edit/angular-gmiahh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

You can compare this to the actual implementation and apply the necessary adjustments.

EDIT: If the Grid happens to be used alongside Angular Material CDK Overlay, you can also check out this article:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/selectall-ngmaterialcdk/