Grid auto generated columns with locked checkbox column

[n/a]

Hi,

I have this grid markup with auto generated columns by ngFor. Also I have checkbox column. But I need to make checkbox by default sticky (locked) and this will throw error.

Thank you for your time.

GridComponent.html:5 ERROR Error: There should be at least one non-locked column
    at GridComponent.verifySettings (index.js:7712)
    at GridComponent.ngAfterContentChecked (index.js:6992)
    at callProviderLifecycles (core.js:24917)
    at callElementProvidersLifecycles (core.js:24886)
    at callLifecycleHooksChildrenFirst (core.js:24868)
    at checkAndUpdateView (core.js:35072)
    at callViewAction (core.js:35433)
    at execComponentViewsAction (core.js:35361)
    at checkAndUpdateView (core.js:35074)
    at callViewAction (core.js:35433)

<!-- Checkbox -->
<kendo-grid-checkbox-column
	[width]="checkboxColumnSize"
	[style]="{ 'text-align': 'center' }"
        Error -> [locked]="true" or [sticky]="true
>
	<ng-template kendoGridHeaderTemplate>
		<!-- Columns Menu -->
		<ca-toggle-popup
			class="grid-columns-menu"
			#showColumnsMenu
			(toggle)="onShowColumnsMenu($event)"
		>
			<button
				button
				kendoButton
				class="columns-menu-button"
				iconClass="fal fa-cog"
				look="clear"
				kendoTooltip
				position="right"
				title="Settings"
			></button>
			<div popup>
				<div class="columns-menu-header">
					<span>Grid Columns</span>
				</div>
				<ca-switch-lists
					#switchColumns
					[keyField]="'field'"
					[textField]="'title'"
					[maxSelected]="maxSwitchColumns"
					[availableData]="availableColumns"
					[selectedData]="selectedColumns"
					class="columns-menu-switchlist"
				></ca-switch-lists>
				<div class="columns-menu-actions">
					<button
						kendoButton
						(click)="onCancelColumnsMenu(showColumnsMenu)"
					>
						Cancel
					</button>
					<button
						kendoButton
						[primary]="true"
						(click)="
							onApplyColumnsMenu(
								showColumnsMenu,
								switchColumns.selectedData
							)
						"
						[disabled]="!switchColumns.selectedData?.length"
					>
						Apply ({{ switchColumns.selectedData?.length || 0 }}/{{
							maxSwitchColumns
						}})
					</button>
				</div>
			</div>
		</ca-toggle-popup>
	</ng-template>
</kendo-grid-checkbox-column>
<!-- Columns -->
<kendo-grid-column
	*ngFor="let column of columns; let i = index"
	[field]="column.field"
	[title]="column.title"
	[width]="getColumnWidth | apply: i:column.field:defaultColumnSize"
	[filter]="filterColumn | apply: column.type"
	[locked]="lockColumn | apply: column.field"
	[style]="{
		'min-width': minColumnSize + 'px',
		'max-width': maxColumnSize + 'px'
	}"
>
	<!-- Column Header -->
	<ng-template kendoGridHeaderTemplate let-column>
		<!-- Cell Value -->
		<span class="k-flex">{{ column.title }}</span>
		<!-- Cell Menu -->
		<kendo-grid-column-menu
			*ngIf="!hasMore"
			[column]="column"
			[sort]="state.sort"
			[filter]="state.filter"
			[settings]="{
				sort: true,
				filter: true,
				lock: true,
				columnChooser: false
			}"
		>
		</kendo-grid-column-menu>
	</ng-template>
	<!-- Cell Item -->
	<ng-template kendoGridCellTemplate let-dataItem>
		<span class="grid-cell">{{
			editCell | apply: column:dataItem[column.field]
		}}</span>
	</ng-template>
</kendo-grid-column>

[Yanmario]

Hi Ioannis,

Thank you for the provided code snippet and error message.

The error occurs when all of the Grid columns are being locked. Having at least one non-locked column is a part of the requirements and limitations of the Grid locked columns functionality:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-prerequisites

The reason behind these requirements is that when there are locked columns, the Grid content is rendered in two separate tables - one for the "locked" non-scrollable content, and one for the scrollable content.

By looking into the provided HTML markup, it seems that the cause of the issue might be coming here:

<kendo-grid-column
	*ngFor="let column of columns; let i = index"
	[field]="column.field"
	[title]="column.title"
	[width]="getColumnWidth | apply: i:column.field:defaultColumnSize"
	[filter]="filterColumn | apply: column.type"
	[locked]="lockColumn | apply: column.field"
	[style]="{
		'min-width': minColumnSize + 'px',
		'max-width': maxColumnSize + 'px'
	}"
>

I'm not entirely sure how the columns are being locked without additional information about the TypeScript implementation of the component. If every column is being locked, some modifications to the logic will be required to leave at least one non-locked column for the Grid to function properly.

I hope this helps. Please let me know if I can provide any further assistance on this matter.

Regards,
Yanmario Menev
Progress Telerik

[n/a]

Hello Yanmario, sorry I forgot to add this code. My bad. Method lockColumn return false, and when I add locked=true to checkbox column. Error: There should be at least one non-locked column. I thought I will use lockColumn in next step if checkbox column locked.

[Yanmario]

Hi Ioannis,

I'm glad that I was able to help you. Also, I wanted to check up if any further help is needed on this matter.

Regards,
Yanmario Menev
Progress Telerik

[n/a]

Hi Yanmario, I just say that lockColumn return false. I need lock checkbox column first. When I lock only checkbox column, but other columns in ngFor is false I got error. I still have error.

[Yanmario]

Hi Ioannis,

I was unable to reproduce the described issue in the following example:

https://stackblitz.com/edit/grid-checkbox-locked-render-columns

Can you please provide me with background information about the TypeScript and HTML(if anything changed) implementation logic or a StackBlitz example demonstrating the issue(feel free to use the above example as a base). Having such details in mind will help me understand the use case better and allocate the issue faster. Thank you for your cooperation in advance.

Regards,
Yanmario Menev
Progress Telerik