Completed
Last Updated:
19 Dec 2025 13:21
by ADMIN
Jakub
Created on:
04 Dec 2025 15:38
Category:
Kendo UI for Angular
Type:
Bug Report
Directive kendoGridColumnChooserTool within kendo-toolbar component does not work when grouped columns
The directive `kendoGridColumnChooserTool` does not work correctly when having columns which are grouped. See this example: https://stackblitz.com/edit/angular-r9duqpcn?file=src%2Fapp%2Fapp.component.ts
- It shows that 0 items are selected ("0 Selected items") - This is incorrect because all columns are selected by default. In the example above, I would expect it shows that 4 items are selected.
- When unselecting an item in the list (popup), it does not actually hide any column.
- When using directive `kendoGridToolbarTemplate` with `kendo-grid-column-chooser` component, it works as expected. I would expect that `kendoGridColumnChooserTool` directive would work (behave) exactly the same way.
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
KENDO_GRID,
KENDO_GRID_EXCEL_EXPORT,
KENDO_GRID_PDF_EXPORT,
} from '@progress/kendo-angular-grid';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
import { Product } from './model';
import { products } from './products';
@Component({
selector: 'my-app',
standalone: true,
imports: [
FormsModule,
KENDO_GRID_EXCEL_EXPORT,
KENDO_GRID_PDF_EXPORT,
KENDO_GRID,
KENDO_BUTTONS,
KENDO_TOOLBAR,
KENDO_LABELS,
KENDO_INPUTS,
],
template: `
<kendo-grid
[kendoGridBinding]="products"
[pageSize]="5"
[pageable]="true"
[sortable]="{ mode: 'multiple' }"
[style.width.%]="gridWidth"
>
<ng-template kendoGridToolbarTemplate position="bottom">
<kendo-grid-column-chooser></kendo-grid-column-chooser>
</ng-template>
<kendo-toolbar overflow="scroll">
<kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
</kendo-toolbar>
<kendo-grid-column-group title="TestA">
<kendo-grid-column
field="ProductName"
title="Product Name"
></kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column-group title="TestB">
<kendo-grid-column
field="UnitPrice"
filter="numeric"
title="Price"
></kendo-grid-column>
<kendo-grid-column
field="Discontinued"
filter="boolean"
title="Discontinued"
></kendo-grid-column>
<kendo-grid-column
field="UnitsInStock"
filter="numeric"
title="Units In Stock"
></kendo-grid-column>
</kendo-grid-column-group>
</kendo-grid>
`,
styles: [
`
.example-info {
background: rgba(83, 146, 228, 0.1);
border-radius: 2px;
margin: 10px auto 10px auto;
padding: 15px;
border-left: 4px solid #5392e4;
font-size: 14px;
}
`,
],
})
export class AppComponent {
public gridWidth: number = 100;
public products: Product[] = products;
}
1 comment
ADMIN
Martin Bechev
Posted on:
11 Dec 2025 12:41