Column chooser in Angular TreeGrid component
2 Sep 202524 minutes to read
The column chooser feature in the Syncfusion® Angular TreeGrid component allows dynamic showing or hiding of columns. This feature can be enabled by setting the showColumnChooser property to true.
To use the column chooser, inject the ColumnChooserService in the provider section of AppModule.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule],
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [toolbar]="toolbar" [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: object[] = [];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public toolbar?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbar = ['ColumnChooser'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The column chooser dialog displays the header text of each column by default. If no header text is defined for a column, the corresponding column field name is displayed instead.
Hide column in column chooser dialog
Column names can be hidden in the column chooser by setting the column.showInColumnChooser property to false. This feature is useful when working with numerous columns or when limiting the columns available for selection in the column chooser dialog.
In this example, the column.showInColumnChooser property is set to false for the Task Name column. As a result, the Task Name column will not appear in the column chooser dialog.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule],
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [toolbar]="toolbar" [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' [showInColumnChooser]='false' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: object[] = [];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public toolbar?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbar = ['ColumnChooser'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The
column.showInColumnChooserproperty is applied to each<e-column>element individually. Setting it to false hides specific columns from the column chooser dialog.
Open column chooser externally
The Syncfusion® Angular TreeGrid provides flexibility to open the column chooser dialog using an external button. By default, the column chooser button appears in the right corner of the TreeGrid component, and clicking it opens the column chooser dialog below. However, the column chooser dialog can be programmatically opened at specific X and Y axis positions using the openColumnChooser method.
The following example demonstrates opening the column chooser in the TreeGrid using an external button:
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService} from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule, ButtonModule ],
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: `<button id='show' ej-button class='e-flat' (click)='show()'> open Column Chooser </button>
<ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: object[] = [];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
}
show() {
(this.treegrid as TreeGridComponent).columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Customize column chooser dialog size
The column chooser dialog in the Syncfusion® Angular TreeGrid comes with a default size, but the height and width can be modified according to specific requirements using CSS styles.
To customize the column chooser dialog size, use the following CSS styles:
.e-treegrid .e-dialog.e-ccdlg {
height: 500px;
width: 200px;
}
.e-treegrid .e-ccdlg .e-cc-contentdiv {
height: 200px;
width: 230px;
}import { NgModule, ViewChild, ViewEncapsulation } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule,],
encapsulation:ViewEncapsulation.None,
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: ` <ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [toolbar]="toolbar" [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
styles:[`.e-treegrid .e-dialog.e-ccdlg {
height: 500px;
width: 200px;
}
.e-treegrid .e-ccdlg .e-cc-contentdiv {
height: 200px;
width: 230px;
}`]
})
export class AppComponent implements OnInit {
public data: object[] = [];
public toolbar?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbar = ['ColumnChooser'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Change default search operator of the column chooser
The column chooser dialog in the Syncfusion® Angular TreeGrid provides a search box for searching column names. By default, the search functionality uses the “startsWith” operator to match columns and display results in the column chooser dialog. However, the default search operator can be changed to achieve more precise data matching.
To change the default search operator of the column chooser in the Syncfusion® TreeGrid, use the operator property of the columnChooserSettings through the grid property object of the TreeGrid instance in the load event.
The following example demonstrates changing the default search operator of the column chooser to contains in the TreeGrid:
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule],
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [toolbar]="toolbarOptions" [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks' (load)=load($event)>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: object[] = [];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public toolbarOptions?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbarOptions = ['ColumnChooser'];
}
load(args: any) {
(this.treegrid as TreeGridComponent).grid.columnChooserSettings = { operator: 'contains' };
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Diacritics searching in column chooser
By default, the TreeGrid ignores diacritic characters when performing a search in the column chooser. However, diacritic characters can be included in the search by setting the columnchoosersettings.ignoreAccent property to true through the grid property object of the TreeGrid instance with the load event.
The following example demonstrates using the ignoreAccent property to include diacritic characters for searching in the column chooser:
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService, ColumnChooserService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ToolbarItems, GridComponent, ColumnChooserSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [TreeGridModule,],
providers: [PageService, SortService, FilterService, ToolbarService, ColumnChooserService,],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid id="TreeGrid" [dataSource]='data' [toolbar]="toolbarOptions" [treeColumnIndex]='1' [showColumnChooser]='true' height='270' childMapping='subtasks' (load)=load($event)>
<e-columns>
<e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' type='date' width=90>
</e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data: object[] = [];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public toolbarOptions?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbarOptions = ['ColumnChooser'];
}
load(args: any) {
(this.treegrid as TreeGridComponent).grid.columnChooserSettings = { ignoreAccent: true };
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Column Chooser Template in Syncfusion Angular TreeGrid component
The Column Chooser Template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set showColumnChooser to true and add ColumnChooser to the toolbar property.
To implement a custom column chooser template in the TreeGrid, use the following properties:
-
columnChooserSettings.headerTemplate - Defines the header template of the column chooser.
-
columnChooserSettings.template- Defines the content template.
-
columnChooserSettings.footerTemplate - Defines the footer template.
-
columnChooserSettings.renderCustomColumnChooser - Allows you to override the default column chooser UI with a fully customized layout.
In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the documentation. The columnChooserSettings.template property defines a element with the id set to tree, providing as a container for the TreeView component. The columnChooserSettings.renderCustomColumnChooser method initializes the TreeView with checkboxes and appends it to this template. Checkbox selection is handled using the nodeClicked and keyPress events, which organize columns into Task Info, Schedule, and Progress.
The column chooser footer is customized using columnChooserSettings.footerTemplate, replacing the default buttons with customized Apply and Close buttons. The Apply button updates column visibility based on selection, while the Close button closes the column chooser via the onClick event. Additionally, the header is customized using columnChooserSettings.headerTemplate to include a title and an icon.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridAllModule, TreeGridComponent, PageService, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-treegrid';
import { TreeViewModule, TreeView } from '@syncfusion/ej2-angular-navigations';
import { ButtonComponent, ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { NgIf } from '@angular/common';
@Component({
selector: 'app-container',
template: `<ejs-treegrid id="TreeGrid" #stackedHeadertreegrid clipMode="EllipsisWithTooltip" [dataSource]='data' childMapping='subtasks' height='350' [treeColumnIndex]='1' [allowPaging]=true [toolbar]="toolbar" [showColumnChooser]="true">
<e-columns>
<e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width='200'></e-column>
<e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='endDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' width='90'></e-column>
</e-columns>
<!-- Custom Column Chooser Template using TreeView Component -->
<ng-template #columnChooserSettingsTemplate let-data>
<div *ngIf="!(data && data.columns && data.columns.length)" class="no-record-text">No Matches Found</div>
<div *ngIf="(data && data.columns && data.columns.length)" id="transparent">
<ejs-treeview #treeview id="treeview" cssClass="no-border" [fields]="dataProcess(data)" (nodeClicked)="nodeCheck($event)" (keyPress)="nodeCheck($event)" [showCheckBox]="true"></ejs-treeview>
</div>
</ng-template>
<!-- Column Chooser Header Template -->
<ng-template #columnChooserSettingsHeaderTemplate>
<div>
<span id="column-chooser-text">Column Options</span>
</div>
</ng-template>
<!-- Column Chooser Footer Template with Apply/Close Buttons -->
<ng-template #columnChooserSettingsFooterTemplate>
<button #applyBtn (click)="columnChooserSubmit()" ejs-button>Apply</button>
<button #closeBtn (click)="columnChooserClose()" ejs-button>Close</button>
</ng-template>
</ejs-treegrid>`,
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [TreeGridAllModule, ButtonModule, TreeViewModule, NgIf],
providers: [PageService, ToolbarService, ColumnChooserService],
})
export class AppComponent implements OnInit {
public data: Object[] = [];
public columnChooserSettings?: Object;
@ViewChild('stackedHeadertreegrid')
public treegrid?: TreeGridComponent | any;
@ViewChild('treeview')
public treeview?: TreeView | any;
public toolbar?: string[];
ngOnInit(): void {
this.data = sampleData;
this.toolbar = ['ColumnChooser'];
this.columnChooserSettings = { enableSearching: true };
}
// Apply the column chooser selection
columnChooserSubmit() {
const treeGridInstance = (document.getElementById('TreeGrid') as any).ej2_instances[0];
const checkedElements: any = [];
const uncheckedElements: any = [];
var showColumns = treeGridInstance.getVisibleColumns().filter(function (column: any) { return (column.showInColumnChooser === true); });
showColumns = showColumns.map(function (col: any) { return col.headerText; });
const treeItems = document.querySelectorAll('.e-list-item');
treeItems.forEach(item => {
const itemDetails = this.treeview.getNode(item);
if (!itemDetails.hasChildren) {
if (item.getAttribute('aria-checked') === 'true') {
checkedElements.push(itemDetails.text);
} else {
uncheckedElements.push(itemDetails.text);
}
}
});
showColumns = showColumns.filter((col: any) => !uncheckedElements.includes(col));
checkedElements.forEach((item: any) => {
if (!showColumns.includes(item)) {
showColumns.push(item);
}
});
var columnsToUpdate = { visibleColumns: showColumns, hiddenColumns: uncheckedElements };
treeGridInstance.grid.columnChooserModule.changeColumnVisibility(columnsToUpdate);
};
columnChooserClose() {
const treeGridInstance = (document.getElementById('TreeGrid') as any).ej2_instances[0];
treeGridInstance.grid.columnChooserModule.hideDialog();
};
// Render TreeView in the column chooser's Content
dataProcess(args: any) {
const parentNodes = [
{ id: 1, name: 'Task Info', hasChild: true, expanded: true },
{ id: 2, name: 'Schedule', hasChild: true, expanded: true },
{ id: 3, name: 'Progress', hasChild: true, expanded: true },
];
let treeData = [];
if (args.columns && args.columns.length) {
treeData = args.columns.map((column: any) => {
let parentId: number = 0;
switch (column.field) {
case 'taskID':
case 'taskName':
parentId = 1;
break;
case 'startDate':
case 'endDate':
parentId = 2;
break;
case 'duration':
case 'progress':
case 'priority':
parentId = 3;
break;
}
return {
id: column.uid,
name: column.headerText,
pid: parentId,
isChecked: column.visible
};
});
const uniquePids: any[] = [];
treeData.forEach((item: any) => {
if (!(uniquePids as any).includes(item.pid)) {
uniquePids.push(item.pid);
}
});
const filteredParents = parentNodes.filter((parent: any) => (uniquePids as any).includes(parent.id));
treeData.unshift(...filteredParents);
} else {
treeData = [];
}
const fields = { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
return fields;
};
// Handle checking/unchecking nodes in the TreeView (column chooser)
nodeCheck(args: any) {
let checkedNode = [args.node];
if (args.event.target.classList.contains('e-fullrow') || args.event.key === "Enter") {
let getNodeDetails = this.treeview.getNode(args.node);
if (getNodeDetails.isChecked === 'true') {
this.treeview.uncheckAll(checkedNode);
} else {
this.treeview.checkAll(checkedNode);
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));