HelpBot Assistant

How can I help you?

Column Chooser in Angular Grid Component

19 Mar 202624 minutes to read

The Syncfusion® Angular Grid includes a built-in Column Chooser feature that allows columns to be shown or hidden through a simple dialog with checkboxes.

To enable the Column Chooser, configure the following properties in the Grid component:

  • To use the Column Chooser, inject the ColumnChooserService to the providers array.
  • Set the showColumnChooser property to true.
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ColumnChooserService, GridModule, ToolbarItems, ToolbarService } 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

Column names can be hidden in the column chooser by setting the showInColumnChooser property to false. This is useful when a column should always remain visible in the Grid and should not be hidden through the Column Chooser.

In this example, the showInColumnChooser property is set to false for the “Order ID” column, preventing it from appearing in the Column Chooser dialog.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ColumnChooserService, GridModule, ToolbarItems, ToolbarService } 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 that should be hidden.
  • At least one column in the grid must remain in a visible state to allow showing and hiding columns.

Open column chooser externally

The column chooser dialog can be opened using an external button through the openColumnChooser method. By default, the column chooser button appears in the right corner of the Grid and opens the dialog below it when clicked. The method allows programmatically opening the dialog at specific “X” and “Y” axis positions.

The following example illustrates invoking the Column Chooser dialog using an external button:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnChooserService, GridComponent, GridModule, ToolbarService } 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 comes with a default size, but height and width can be modified using CSS styles to meet specific needs.

.e-grid .e-dialog.e-ccdlg {
    height: 500px;
    width: 200px;
}
.e-grid .e-ccdlg .e-cc-contentdiv {
    height: 200px;
    width: 230px;
}
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ColumnChooserService, GridModule, ToolbarItems, ToolbarService } 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));

Customize column order in column chooser dialog

By default, the Column Chooser displays columns in the same order as they appear in the Grid. However, this display order can be customized to prioritize specific columns without altering their actual arrangement in the Grid layout. This customization is especially useful when working with a large number of columns, as it enhances clarity and helps quickly locate important columns within the column chooser dialog.

Sorting columns in the column chooser

The Grid allows sorting the list of columns displayed in the column chooser dialog. Sorting behavior can be controlled 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 for sort the column chooser list based on sort direction:

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

@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.

Specific columns can be shown in the column chooser by setting selectedColumns in the event argument of the beforeOpenColumnChooser event.

Here is an example for show only specific columns in the column chooser:

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

@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 provides a search box for searching column names. By default, the search functionality uses the startsWith operator to match columns and display results. The default search operator can be modified using the operator property of the columnChooserSettings to achieve more precise matching.

The following example demonstrates changing the default search operator to contains.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnChooserService, ColumnChooserSettingsModel, GridComponent, GridModule, ToolbarItems, ToolbarService } 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, diacritic characters are ignored during search comparison in the column chooser. Diacritic characters can be included in the search by setting the columnChooserSettings.ignoreAccent property to true.
The following example demonstrates enabling diacritic-sensitive searching:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnChooserService, ColumnChooserSettingsModel, GridComponent, GridModule, ToolbarItems, ToolbarService } 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

The Column Chooser template feature supports full customization of the column chooser dialog’s appearance. The column chooser consists of three main parts: the header, content area, and footer. Each section can be customized using the following properties:

  • columnChooserSettings.headerTemplate – Customizes the header area of the column chooser. By default, it displays the text “Choose Column.” This property allows changing the default header content. It is optional.
  • columnChooserSettings.template – Customizes the main content area of the column chooser. Instead of showing a list of checkboxes with column names, a custom layout can be defined using this property.
  • columnChooserSettings.footerTemplate – Customizes the footer area of the column chooser. By default, it includes “OK” and “Cancel” buttons. This property allows replacing or modifying the footer content. It is optional.

In this example, a Syncfusion® TreeView component is rendered inside the column chooser. The Syncfusion® TreeView package installation is described in the documentation. The columnChooserSettings.template property renders the TreeView with checkboxes. Checkbox selection is handled using the nodeClicked and keyPress events, organizing columns into “Order Details”, “Shipping Details”, and “Delivery Status”.

The column chooser footer is customized using the columnChooserSettings.footerTemplate 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 { stackedHeaderData } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ColumnChooserService, ColumnModel, GridComponent, GridModule, PageService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TreeView, 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' height='267px'>
          <e-columns>
            <e-column field='CustomerID' headerText='Customer ID' width='160' height='250' 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 or disable search in column chooser

The column chooser includes a built-in search box by default that allows to quickly filter and find columns from the list. This search functionality can be controlled using the enableSearching property of the columnChooserSettings.

Property values:

  • true (default): The search box is displayed in the column chooser dialog.
  • false: The search box is hidden from the column chooser dialog.

The following example demonstrates dynamically enabling or disabling the search option using the Syncfusion® Switch component. When the switch is toggled, the change event updates the enableSearching property:

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

@Component({
    imports: [ GridModule,SwitchModule],
    providers: [ToolbarService, ColumnChooserService],
    standalone: true,
    selector: 'app-root',
    template: `
      <div style="padding: 5px 0px 5px 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 #grid [dataSource]='data' [toolbar]='toolbarOptions' height='260px' [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));