kendo-grid-checkbox-column not appearing in my grid

0 Answers 2324 Views
CheckBox Grid
Murray
Top achievements
Rank 1
Iron
Veteran
Murray asked on 27 Jul 2021, 11:23 AM

I am using kendo-angular-grid v 5.0.3 and if I declare

  <kendo-grid-checkbox-column showSelectAll="true">
  </kendo-grid-checkbox-column>

 

in my grid before any of my <kendo-grid-column> definitions, with

  [selectable]="enabledtruecheckboxOnlytruemode'multiple' }"

 

defined in <kendo-grid>  I do not see a checkbox column, even if I add to my grid the following:

  [kendoGridSelectBy]="parent.rowsSelectedKeys"
  [selectedKeys]="parent.selectedRows"

 

My columns are built from a set of config as so:

  <kendo-grid-column
    *ngFor="let col of parent.columnDefinitions$ | async"
    [ngSwitch]="col.type"
    field="{{ col.field }}"
    title="{{ col.title }}"
    width="{{ col.width }}"
    [editable]="col.editable"
    editor="{{ col.type }}"
    format="{{
      col.filterFormat == 'datetime' || col.filterFormat == legacyDateTimeFormat
        ? gridDateTimeFormat
        : dateFilterFormat
    }}"
    filter="{{ col.type == 'string' ? '' : col.type }}"
    [filterable]="col.filterable"
  >

 

Why am I not seeing my checkbox selection column displaying?

 

Silviya
Telerik team
commented on 28 Jul 2021, 12:37 PM

Hi Murray,

Thanks a lot for the provided code snippets.

Based on the shared information I have a hunch that the observed behaviour might be due to the lack of an explicitly set width of the CheckboxColumnComponent.

If a column does not have a set width, its width is considered to be auto. Thus the column spans the available space not taken by columns with a set width. In a scenario with no enough room for all the columns to be rendered, the auto width results in a width of 0px i.e. such columns are not visible.

For further details on column width check the following documentation article

https://www.telerik.com/kendo-angular-ui/components/grid/columns/width/

I created the following demo based on the provided code

https://stackblitz.com/edit/angular-t4mmde-5zbagm?file=app%2Fapp.component.ts

Try to resize and shrink the demo window on the right side. Observe how when the available grid width is getting smaller, the columns without an explicit width ('Category' and the first checkbox column) start to disappear.

However, if that is not the case, don't hesitate to let me know. Also, feel free to edit the stackblitz example I have shared, so that I could further investigate the root cause of the problem.

Regards,

Silviya

Murray
Top achievements
Rank 1
Iron
Veteran
commented on 28 Jul 2021, 12:59 PM

Hi Silviya, setting an explicit width have resolved the problem. Many thanks

No answers yet. Maybe you can help?

Tags
CheckBox Grid
Asked by
Murray
Top achievements
Rank 1
Iron
Veteran
Share this question
or