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

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!

Continue reading...