Column chooser in Angular Grid component

26 Aug 202524 minutes to read

The Column Chooser feature in the Syncfusion Angular Grid component enables users to dynamically show or hide columns within the grid. This capability is activated by setting the showColumnChooser property to true.

To use the Column Chooser, inject the ColumnChooserService in the providers array 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));

By default, the Column Chooser dialog displays the header text of each column. If a column does not have a header text, its field name is shown instead.

Hide column in column chooser dialog

To exclude specific columns from appearing in the Column Chooser dialog, set the columns.showInColumnChooser property to false for those columns. This is useful for grids with many columns or when only selected columns should be user-toggleable.

In the example below, the Order ID column is excluded from the Column Chooser dialog by setting columns.showInColumnChooser to false.

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 must be set individually for each <e-column> element you wish to hide.
  • At least one column in the grid must remain in a visible state to allow showing and hiding columns.

Open column chooser 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.

The following example illustrates invoking the Column Chooser dialog 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 size of the Column Chooser dialog in the Syncfusion Angular Grid can be customized by overriding its default styles via CSS. Adjust the height and width properties to fit your layout requirements.

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

Customizing the order of columns in the column chooser

The Syncfusion Angular Grid makes it easy to customize the order of columns in the column chooser, without affecting their actual order in the Grid.

By default, the column chooser displayed columns in the same order as they appeared in the Grid. With the introduction of customization options, the column list in the chooser can now be rearranged.

Sorting columns in the column chooser

The Syncfusion Grid allows to sort the list of columns displayed in the column chooser dialog.

You can control the sorting behavior by specifying the sortDirection in the event argument of the beforeOpenColumnChooser event. The available sorting options are:

Option Description
None No sorting is applied to the column list.
Ascending Columns are sorted in ascending alphabetical order (A → Z).
Descending Columns are sorted in descending alphabetical order (Z → A).

Here is an example of how to sort the column chooser list based on sort direction:

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [GridModule],
    providers: [ToolbarService, ColumnChooserService],
    template: `<ejs-grid #grid [dataSource]="data" [toolbar]="['ColumnChooser']" [showColumnChooser]="true" height="235" (beforeOpenColumnChooser)="onBeforeOpenColumnChooser($event)">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" isPrimaryKey="true" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150" textAlign="Left"></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="ShipCity" headerText="Ship City" width="150" [showInColumnChooser]="false"></e-column>
        <e-column field="ShipRegion" headerText="Ship Region" width="150" [visible]="false"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" 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;
    }
    // Sort the column chooser list based on the sort direction.
    onBeforeOpenColumnChooser(args: any): void {
        args.sortDirection = "Ascending";
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Displaying specific columns in the column chooser

The Grid also supports displaying only selected columns in the column chooser. This is helpful when only specific columns need to be shown in the column chooser, making it easier to focus on the most important ones.

To achieve this, you can specify which columns should appear in the column chooser by setting selectedColumns in the event argument of the beforeOpenColumnChooser event.

Here is an example of how to show only specific columns in the column chooser:

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [GridModule],
    providers: [ToolbarService, ColumnChooserService],
    template: `<ejs-grid #grid [dataSource]="data" [toolbar]="['ColumnChooser']" [showColumnChooser]="true" height="235" (beforeOpenColumnChooser)="onBeforeOpenColumnChooser($event)">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" isPrimaryKey="true" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150" textAlign="Left"></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="ShipCity" headerText="Ship City" width="150" [showInColumnChooser]="false"></e-column>
        <e-column field="ShipRegion" headerText="Ship Region" width="150" [visible]="false"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" 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 only specific columns in the column chooser.
    onBeforeOpenColumnChooser(args: any): void {
    args.selectedColumns = ['CustomerID', 'Freight', 'ShipCountry']; 
    }
}
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

The Syncfusion Angular Grid supports searching for columns that contain diacritic characters. By default, diacritics are ignored during search. To enable diacritic-sensitive searching in the Column Chooser, set the ignoreAccent property to true.

The following example demonstrates enabling diacritic-sensitive searching:

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 supports full customization of its header, content, and footer via templates. Activate the Column Chooser by setting showColumnChooser to true and including ColumnChooser in the toolbar property.

The following template-related properties are available under columnChooserSettings:

  • headerTemplate: Customizes the dialog header.
  • template: Defines content rendered in the dialog body (such as custom selection UI or controls).
  • footerTemplate: Customizes the dialog footer.

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

The Column Chooser dialog’s search feature is enabled by default. It can be dynamically enabled or disabled by setting the columnChooserSettings.enableSearching property to true or false.

The following example demonstrates how to dynamically enable or disable the search feature using the Switch component and its change event.

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