Grid auto generated columns with locked checkbox column

1 Answer 285 Views
Grid
n/a
Top achievements
Rank 1
Iron
n/a asked on 28 May 2021, 09:46 AM

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>

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 02 Jun 2021, 07:48 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

n/a
Top achievements
Rank 1
Iron
commented on 23 Jun 2021, 06:57 AM

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
Telerik team
commented on 25 Jun 2021, 11:48 AM

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
Top achievements
Rank 1
Iron
commented on 06 Jul 2021, 09:26 AM | edited

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
Telerik team
commented on 09 Jul 2021, 09:14 AM

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

Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Iron
Answers by
Yanmario
Telerik team
Share this question
or