kendo-grid-checkbox-column is empty in my grid after upgrade from 4.7.0 to 5.3.1

[Daniel]

I'm having trouble getting the checkbox to appear in my grid and have the rows selectable. Prior to upgrading to the latest revision, I was on "@progress/kendo-angular-grid": "^4.7.0" and everything worked fine,  after the upgrade I'm on "@progress/kendo-angular-grid": "^5.3.1".

The first part of my template code for the grid looks like this:

<kendo-grid
	[data]="gridData"
	[rowClass]="rowCallback"
	[sortable]="true"
	[selectable]="tableGrid.selectableSettings"
	[rowHeight]="tableGrid.options.rowHeight"
	[height]="tableGrid.options.height"
	[kendoGridSelectBy]="selectionKey"
	[sort]="gridSort"
	(sortChange)="sortChange($event)"
	[selectedKeys]="selectedRows"
	[scrollable]="'virtual'"
	(cellClick)="onCellClick($event)"
>
<kendo-grid-checkbox-column
		*ngIf="tableGrid.options.selectAble"
		[headerClass]="'ra-grid-header ra-grid-checkbox'"
		[footerClass]="'ra-grid-footer'"
		[class]="'ra-grid-checkbox'"
		[showSelectAll]="true"
		[width]="35"
></kendo-grid-checkbox-column>
...
#the rest of the row code 
...

In the code behind, tableGrid.selectableSettings = {checkboxOnly: true, mode: 'multiple'}

After upgrading, my rows are no longer selectable and the checkbox has dissappeared.  If I set tableGrid.selectableSettings = {mode: 'multiple'} (removing the checkboxOnly setting), I'm able to select rows and ctrl-click the rows for multiselect, but the checkbox is, of course, gone.  I've tried expanding the width to more than 35, but that did not make a difference.  

Examining the DOM for the select object, I see the following styles applied: 

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.k-checkbox {
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    opacity: 0;
    -webkit-appearance: none;
    pointer-events: none;
}

[Dimiter Topalov]

Hi Daniel,

The described issue is caused by the following styles:

.k-checkbox {
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    opacity: 0;
    -webkit-appearance: none;
    pointer-events: none;
}

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

Please make sure that you are using the latest version of the Kendo Theme, and there are no custom classes/styles that hide the checkboxes.

In the past, the Kendo Themes relied on styling the checkbox labels and hiding the actual checkboxes to ensure uniform display across different browsers, but the checkbox styling was updated in version 4.7.0 of the Default theme back in 2019:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/CHANGELOG.md#470-2019-11-21

The 5.1.2 version of the Grid features a fix related to removing the empty labels, previously used solely for styling purposes. However this was causing accessibility issues (using of empty labels), which is why the label elements were removed, and the input elements received aria-label attributes instead:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/changelog/#9558143c-4493-50ac-bd23-08dab6b0ae87

The Change Log for each official Grid package version also lists the minimum versions of the supported Kendo Themes, for example for v. 5.3.1, these are:

@progress/kendo-theme-bootstrap: ^4.36.0
@progress/kendo-theme-default: ^4.39.0
@progress/kendo-theme-material: ^3.34.0

Using the latest Kendo Theme version should resolve the described issue (updated example with no styles hiding the checkbox):

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

I hope this helps.

Regards,

Dimiter Topalov
Progress Telerik

[Vic]

With most recent styles (5.2.0), the checkbox doesn't show in our project and also in your stackblitz above.

-webkit-appearance: none

Appears to be what hides it.

[Dimiter Topalov]

The latest Kendo theme version is working in a combination with the latest major Grid (and other components) versions:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/changelog/#b996c494-ea51-5f8f-9f74-7c21eecd7740

https://github.com/telerik/kendo-angular/issues/3557

The Grid checkboxes are rendered as expected when using the latest Kendo UI for Angular packages:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/row-selection/

Please make sure that compatible versions of the themes and the component packages are installed.

[Vic]

After digging a bit - found that we were using input element with the class "k-checkbox" when we should be using a directive kendoCheckbox.  

We just did a major update and found a lot of breaking changes and this was one of them.  

We're all good since we switched over to using the directive.