Column chooser in Angular Grid component

26 Mar 202524 minutes to read

The column chooser feature in the Syncfusion Angular Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the showColumnChooser property as true.

To use the column chooser, you need to inject the ColumnChooserService in the provider section of AppModule.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true'>
               <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="Right"></e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
               </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['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 the header text is not defined for a column, the corresponding column field name is displayed instead.

Hide column in column chooser dialog

You can hide the column names in column chooser by defining the columns.showInColumnChooser as false. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog.

In this example, the columns.showInColumnChooser property is set to false for the Order ID column. As a result, the Order ID column will not be displayed in the column chooser dialog.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true'>
               <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right" [showInColumnChooser]='false'></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="Right"></e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
               </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ColumnChooser'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The columns.showInColumnChooser property is applied to each element individually. By setting it to false, you can hide specific columns from the column chooser dialog.
  • To work with showing and hiding columns, it is necessary to have at least one column of the grid in a visible state

Open column chooser by externally

The Syncfusion Angular Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific X and Y axis positions by using the openColumnChooser method.

Here’s an example of how to open the column chooser in the Grid using an external button:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: ` <button id='show' ejs-button class='e-primary' (click)='show()'> open Column Chooser </button>
                <ejs-grid #grid [dataSource]='data' [height]='280' [showColumnChooser]= 'true'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right" [showInColumnChooser]='false'></e-column>
                        <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="right"></e-column>
                        <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
                        <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    show() {
        this.grid?.columnChooserModule.openColumnChooser(100, 40); // 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 Syncfusion Angular Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles.
To customize the column chooser dialog size, you can use the following CSS styles:

.e-grid .e-dialog.e-ccdlg {
    height: 500px;
    width: 200px;
}
.e-grid .e-ccdlg .e-cc-contentdiv {
    height: 200px;
    width: 230px;
}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid id='grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true'>
               <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right" [showInColumnChooser]='false'></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="Right"></e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
               </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['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 Grid provides a search box that allows you to search for column names. By default, the search functionality uses the “startsWith” operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.

To change the default search operator of the column chooser in Syncfusion Grid, you need to use the operator property of the column chooser.

Here’s an example of how to change the default search operator of the column chooser to contains in the Angular Grid:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems, GridComponent, ColumnChooserSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true' [columnChooserSettings]='columnChooserSettings'>
               <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='120' format="yMd" textAlign="Right"></e-column>
                    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='130'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='130'></e-column>
               </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    @ViewChild('grid') public grid?: GridComponent;

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public columnChooserSettings?:ColumnChooserSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ColumnChooser'];
        this.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 grid ignores diacritic characters when performing a search in the column chooser. However, in some cases, you may want to include diacritic characters in the search. To enable this behavior, you can set the ignoreAccent property to true.

Here is an example that demonstrates the usage of the ignoreAccent property to include diacritic characters for searching in the column chooser:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems, GridComponent, ColumnChooserSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true' [columnChooserSettings]='columnChooserSettings'>
               <e-columns>
                    <e-column field='ÒrderID̂' headerText='Òrder ID̂' width='120' textAlign="Right"></e-column>
                    <e-column field='OrderDate' headerText='Order Date' width='120' format="yMd" textAlign="Right"></e-column>
                    <e-column field='F̂reight' headerText='F̂reight' width='120' format='C2' textAlign="Right"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width='130'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='130'></e-column>
               </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    @ViewChild('grid') public grid?: GridComponent;

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public columnChooserSettings?:ColumnChooserSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ColumnChooser'];
        this.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 Grid

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 Grid, 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.

In this example, the Syncfusion TreeView component is rendered inside the column chooser using the ng-template directive. To use the TreeView component, install the Syncfusion TreeView package as described in the documentation. The columnChooserSettingsTemplate reference variable is assigned an ng-template, where the TreeView component is rendered with checkboxes for selecting columns. Checkbox selection is handled using the nodeClicked and keyPress events, which organize columns into Order Details, Shipping Details, and Delivery Status.

The column chooser footer is customized using the columnChooserSettingsFooterTemplate reference variable, which is assigned an ng-template, 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 Click event. Additionally, the header is customized using the columnChooserSettingsHeaderTemplate reference variable, which is assigned an ng-template to include a title and an icon.

import { Component, ViewChild } from '@angular/core';
import { stackedHeaderData } from './datasource';
import { ColumnModel, GridModule, PageService, ToolbarService, ColumnChooserService, GridComponent } from '@syncfusion/ej2-angular-grids';
import { TreeView } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'

@Component({
  imports: [GridModule, ButtonModule, TreeViewModule],
  providers: [PageService, ToolbarService, ColumnChooserService],
  standalone: true,
  selector: 'app-root',
  template: `
      <div class="control-section">
        <ejs-grid #grid [dataSource]="data" [showColumnChooser]='true' [allowMultiSorting]='true' [columnChooserSettings]='columnChooserSettings' [toolbar]='toolbar'>
          <e-columns>
            <e-column field='CustomerID' headerText='Customer ID' width='160' textAlign="Right" minWidth=20  isPrimaryKey='true' [showInColumnChooser]='false'></e-column>
            <e-column field='CustomerName' headerText='Name' width='100'></e-column>
            <e-column headerText='Order Details' [columns]='orderColumns' textAlign="Center"></e-column>
            <e-column headerText='Shipping Details' [columns]='shipColumns' textAlign="Center"></e-column>
            <e-column headerText='Delivery Status' [columns]='deliveryColumns' textAlign="Center"></e-column>
          </e-columns>
          <ng-template #columnChooserSettingsTemplate let-data>
            <div id='treeparent'><ejs-treeview #treeview id='treeview' cssClass="no-border" [fields]='dataProcess(data)' (nodeClicked)='nodeCheck($event)' (keyPress)='nodeCheck($event)' [showCheckBox]='true' [enableRtl]='enableRTL'></ejs-treeview></div>
          </ng-template>
          <ng-template #columnChooserSettingsHeaderTemplate>
            <div>
              <span class="e-icons e-columns" id="column-chooser-icon"></span> 
              <span id="column-chooser-text">Column Options</span>
            </div>
          </ng-template>
          <ng-template #columnChooserSettingsFooterTemplate>
            <button #applyBtn (click)="columnChooserSubmit()" ejs-button>Apply</button>
            <button #closeBtn (click)="columnChooserClose()" ejs-button>Close</button>
          </ng-template>
        </ejs-grid>
      </div>`
})
export class AppComponent {
  @ViewChild('grid') public gridInstance: GridComponent | any;
  @ViewChild('treeview') public treeview: TreeView | any;
  public data: Object[] = [];
  public orderColumns?: ColumnModel[];
  public shipColumns?: ColumnModel[];
  public deliveryColumns?: ColumnModel[];
  public columnChooserSettings?: Object;
  public toolbar?: string[];
  public enableRTL?: boolean;

  public ngOnInit(): void {
    this.data = stackedHeaderData;
    this.toolbar = ['ColumnChooser'];
    this.columnChooserSettings = { enableSearching: true };
    this.orderColumns = [
      { field: 'OrderID', headerText: 'ID', textAlign: 'Right', width: 90 },
      { field: 'OrderDate', headerText: 'Date', textAlign: 'Right', width: 110, format: 'yMd' }
    ];
    this.shipColumns = [
      { field: 'ShipCountry', headerText: 'Country', textAlign: 'Left', width: 115 },
      { field: 'Freight', headerText: 'Charges', textAlign: 'Right', width: 130, format: 'C2' },
    ];
    this.deliveryColumns = [
      { field: 'Status', headerText: 'Status', textAlign: 'Center', width: 110 },
    ];
  }

  columnChooserSubmit() {
    const checkedElements: any = [];
    const uncheckedElements: any = [];
    var showColumns = this.gridInstance.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 };
    this.gridInstance.columnChooserModule.changeColumnVisibility(columnsToUpdate);
  };

  columnChooserClose() {
    this.gridInstance.columnChooserModule.hideDialog();
  };

  dataProcess(args: any) {
    const parentNodes = [
      { id: 1, name: 'Customer Details', hasChild: true, expanded: true },
      { id: 2, name: 'Order Details', hasChild: true, expanded: true },
      { id: 3, name: 'Shipping Details', hasChild: true, expanded: true },
      { id: 4, name: 'Delivery Status', 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 'CustomerID':
          case 'CustomerName':
            parentId = 1;
            break;
          case 'OrderID':
          case 'OrderDate':
            parentId = 2;
            break;
          case 'ShipCountry':
          case 'Freight':
            parentId = 3;
            break;
          case 'Status':
            parentId = 4;
            break;
          default:
            break;
        }
        return {
          id: column.uid,
          name: column.headerText,
          pid: parentId,
          isChecked: column.visible
        };
      });
      const uniquePids: string[] = [];
      treeData.forEach((item: any) => {
        if (!uniquePids.includes(item.pid)) {
          uniquePids.push(item.pid);
        }
      });
      const filteredParents = parentNodes.filter((parent: any) => uniquePids.includes(parent.id));
      treeData.unshift(...filteredParents);
    } else {
      treeData = [];
    }
    this.enableRTL = this.gridInstance && this.gridInstance.enableRtl ? true : false;
    const fields = { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
    return fields;
  };

  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));

Enable and disable search option

By default, the search option in the column chooser allows filtering specific columns from the Grid’s column list.

The search option is enabled by default in the column chooser. However, you can disable it by setting the columnChooserSettings.enableSearching property to false.

The following example demonstrates how to enable or disable the search option dynamically using a Switch and its change event in the Grid.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ColumnChooserService, GridComponent } from '@syncfusion/ej2-angular-grids'
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-grids';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons'

@Component({
    imports: [ GridModule,SwitchModule],
    providers: [ToolbarService, ColumnChooserService],
    standalone: true,
    selector: 'app-root',
    template: `
      <div style="padding: 20px 0px 20px 0px">
        <label style="padding-right: 10px">Enable and disable search option</label>
        <ejs-switch #switch id="switch" [checked]="true" (change)="change($event)">
        </ejs-switch>
      </div>
      <ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [showColumnChooser]= 'true'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="Right"></e-column>
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="Right"></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
            <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
        </e-columns>
      </ejs-grid>`
})
export class AppComponent implements OnInit {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];

  public ngOnInit(): void {
    this.data = data;
    this.toolbarOptions = ['ColumnChooser'];
  }

  public change(args: CustomChangeEventArgs){
    (this.grid as GridComponent).columnChooserSettings.enableSearching=args.checked;
  }
}
interface CustomChangeEventArgs extends ChangeEventArgs {
  checked: boolean;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));