HelpBot Assistant

How can I help you?

Column Selection in Angular Grid Component

19 Mar 202624 minutes to read

Column selection in the Grid allows selecting one or more columns by clicking the column header or using keyboard navigation. This feature is useful for highlighting, manipulating, or performing actions on specific columns within the grid. Press Esc to clear the current column selection.

To enable column selection in the grid, set the selectionSettings.allowColumnSelection property to true.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridComponent, GridModule, PageService, SelectionSettingsModel, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, SwitchModule ],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
      <div style="padding: 0px 0px 5px 0px">
        <label>Enable/Disable column selection</label>
        <ejs-switch id="switch" [(checked)]="columnSelection" 
        (change)="toggleColumnSelection()">
        </ejs-switch>
      </div>
      <div style="padding: 5px 0px 0px 0px">
      <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectionOptions" 
      height="300px">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="150">
          </e-column>
          <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
          <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
        </e-columns>
      </ejs-grid>
      </div>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  public selectionOptions?: SelectionSettingsModel;
  public columnSelection = false;
  @ViewChild('grid') grid!: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { type: 'Multiple' };
  }
  toggleColumnSelection(): void {
    (this.grid as GridComponent).selectionSettings.allowColumnSelection = this.columnSelection;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Single column selection

Single column selection allows selecting one column at a time within the grid. This capability is particularly useful when focusing on specific columns or performing actions on the data within a particular column.

To enable single column selection, set the selectionSettings.allowColumnSelection property to true. Additionally, set the selectionSettings.type property to Single. This configuration provides single column selection at a time within the grid.

Mouse interaction: Click on any column header to select a single column.

Keyboard navigation:

  • Navigate between columns using the Left and Right arrow keys when a column header is focused.
  • Press the Enter key to select the focused column.
import { data } from './datasource';
import { Component } from '@angular/core';
import { EditService, FilterService, GridModule, PageService, SelectionSettingsModel, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule ],
    providers: [EditService, ToolbarService, PageService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `   
            <ejs-grid #grid [dataSource]="data" allowPaging="true" 
            [selectionSettings]="selectionOptions">
                <e-columns>
                <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
                </e-column>
                <e-column field="CustomerID" headerText="Customer Name" width="150">
                </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="ShippedDate" headerText="Shipped Date" width="130" 
                format="yMd" textAlign="Right"></e-column>
                <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
                </e-columns>
            </ejs-grid>`
})

export class AppComponent {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public ngOnInit(): void {
        this.data = data;
        this.selectionOptions = { allowColumnSelection: true, type: 'Single' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple column selection

Multiple column selection allows selecting several columns simultaneously within the grid. This capability is particularly useful when focusing on or performing actions on multiple columns at once.

To enable multiple column selection, set the selectionSettings.allowColumnSelection property to true. Additionally, set the selectionSettings.type property to Multiple. This configuration provides multiple column selection within the grid.

Mouse interactions:

  • Hold the Ctrl key and click on different column headers to select multiple non-consecutive columns.
  • Hold the Shift key and click on the start column header, then click on the end column header to select a continuous range of columns.

Keyboard navigation: Hold the Shift key and use the Left or Right arrow keys to extend the selection to multiple columns.

import { data } from './datasource';
import { Component } from '@angular/core';
import { EditService, FilterService, GridModule, PageService, SelectionSettingsModel, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [EditService, ToolbarService, PageService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `   
        <ejs-grid #grid [dataSource]="data" allowPaging="true" 
        [selectionSettings]="selectionOptions">
            <e-columns>
                <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
                </e-column>
                <e-column field="CustomerID" headerText="Customer Name" width="150">
                </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="ShippedDate" headerText="Shipped Date" width="130" 
                format="yMd" textAlign="Right"></e-column>
                <e-column field="ShipCountry" headerText="Ship Country" width="150">
                </e-column>
            </e-columns>
        </ejs-grid>`
})

export class AppComponent {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public ngOnInit(): void {
        this.data = data;
        this.selectionOptions = { allowColumnSelection: true, type: 'Multiple' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Select columns programmatically

The Grid supports externally performing single column selection, multiple column selection, and range of column selection using built-in methods. This capability allows interaction with specific columns within the grid. The following topic demonstrates achieving these selections using methods.

Single column selection

column within the grid. This capability is particularly useful when focusing on specific columns or performing actions on the data within a particular column.

To achieve single column selection, use the selectColumn method. This method selects the column by passing the column index as a parameter.

Column selection requires the selectionSettings.allowColumnSelection property to true and type should be Single.

The following example demonstrates selecting a single column within the grid. The selected column index is obtained through a textbox component and passed as an argument to the selectColumn method. When the button event is triggered by clicking the “Select Column” button, a single column is selected within the grid:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridModule, PageService, ToolbarService, GridComponent,SelectionSettingsModel,PageSettingsModel, } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [GridModule, TextBoxModule, ButtonModule],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter the column index: </label>
          <ejs-textbox #textbox1 required  width="120"></ejs-textbox>
        </div>
        <div style="padding: 10px 0 0px 11%">
        <button ejs-button id="button" (click)="click()">Select Column</button>
        </div>
        <div style="padding: 20px 0px 0px 0px">
          <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectionOptions">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
              width="120"></e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
              <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
              <e-column field="Freight" headerText="Freight" format="C2" width="100">
              </e-column>
            </e-columns>
          </ejs-grid>
        </div>`
})
export class AppComponent implements OnInit {
  
  public data?: Object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  public columnIndex?:number;
  @ViewChild('textbox1') public textbox1?: TextBoxComponent;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { allowColumnSelection: true,  type: 'Single' };
    this.pageOptions = { pageSize: 5 };
  }
  click(): void {
    this.columnIndex = parseInt((this.textbox1 as TextBoxComponent).element.value, 10); 
    if (!isNaN(this.columnIndex)) {
    (this.grid as GridComponent).selectionModule.selectColumn(this.columnIndex);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple column selection

Multiple column selection in the grid enables programmatic selection of several columns at once, allowing operations to be performed on multiple columns simultaneously. This capability is particularly useful for scenarios that require highlighting, manipulating, or applying actions across more than one column in the grid.

To achieve multiple column selection, use the selectColumns method. This method selects columns by passing an array of column indexes as a parameter.

Column selection requires the selectionSettings.allowColumnSelection property to true and type should be Multiple.

The following example demonstrates selecting multiple columns in the grid by calling the selectColumns method within the button click event and passing an array of column indexes as arguments.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridModule, PageService, ToolbarService, GridComponent,SelectionSettingsModel,PageSettingsModel, } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [ GridModule, TextBoxModule, ButtonModule],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div style="padding: 10px 0px 20px 0px">
          <button ejs-button class="btn" (click)="selectColumns([1, 2])">
          select [1, 2] </button>
          <button ejs-button class="btn" (click)="selectColumns([0, 2])">
          select [0, 2]</button>
          <button ejs-button class="btn" (click)="selectColumns([1, 3])">
          select [1, 3] </button>
          <button ejs-button class="btn" (click)="selectColumns([0,5])">
          select [0,5]</button>
          <button ejs-button class="btn" (click)="selectColumns([1,6])">
          select [1,6]</button>
        </div>
        <div style="padding: 10px 0px 20px 0px">
          <button ejs-button class="btn" (click)="selectColumns([0,2,5])">
          select [0,2,5]</button>
          <button ejs-button class="btn" (click)="selectColumns([1,3,6])">
          select [1,3,6]</button>
          <button ejs-button class="btn" (click)="selectColumns([2,4,6])">
          select [2,4,6]</button>
          <button ejs-button class="btn" (click)="selectColumns([0,3,5])">
          select [0,3,5]</button>
        </div>
        <div style="padding: 20px 0px 0px 0px">
          <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectionOptions">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="120">
              </e-column>
              <e-column field="ShipCountry" headerText="Ship Country" width="130">
              </e-column>
              <e-column field="Freight" headerText="Freight" format="C2" width="100">
              </e-column>
              <e-column field="OrderDate" headerText="Order Date" format="C2" width="100">
              </e-column>
              <e-column field="ShipCity" headerText="Ship City" format="C2" width="100">
              </e-column>
              <e-column field="ShipName" headerText="Ship Name" format="C2" width="100">
              </e-column>
            </e-columns>
          </ejs-grid>
        </div>`
})
export class AppComponent implements OnInit {

  public data?: Object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { allowColumnSelection: true, type: 'Multiple' };
    this.pageOptions = { pageSize: 5 };
  }
  selectColumns(columns: number[]): void {
    (this.grid as GridComponent).selectionModule.clearColumnSelection();
    (this.grid as GridComponent).selectionModule.selectColumns(columns);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Range of column selection

Range of column selection provides selecting a group of consecutive columns within the grid. This capability is particularly useful when performing actions on a consecutive set of columns or focusing on specific column ranges.

To achieve range of column selection, use the selectColumnsByRange method. This method selects columns by specifying the start and end column indexes.

The following example demonstrates selecting a range of columns within the grid. The selected column’s start index and end index are obtained through textbox components and passed as arguments to the selectColumnsByRange method. When the button event is triggered by clicking the “Select Columns” button, a range of columns is selected within the grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridModule, PageService, ToolbarService , GridComponent,SelectionSettingsModel,PageSettingsModel,} from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [  GridModule, TextBoxModule, ButtonModule],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter the start column index: </label>
          <ejs-textbox #textbox required width="120"></ejs-textbox>
        </div>
        <div>
          <label style="padding: 30px 17px 0 0">Enter the end column index: </label>
          <ejs-textbox #textbox1 required width="120"></ejs-textbox>
        </div>
        <div style="padding: 10px 0 0px 13%">
          <button ejs-button id="button" (click)="click()">Select Columns</button>
        </div>        
        <div style="padding: 20px 0px 0px 0px">
          <ejs-grid #grid [dataSource]="data" 
          [selectionSettings]="selectionOptions">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
              width="120"></e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="120">
              </e-column>
              <e-column field="ShipCountry" headerText="Ship Country" width="130">
              </e-column>
              <e-column field="Freight" headerText="Freight" format="C2" width="100">
              </e-column>
            </e-columns>
          </ejs-grid>
        </div>`
})

export class AppComponent implements OnInit {

  public data?: Object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  public startIndex?: number;
  public endIndex?: number;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('textbox1') public textbox1?: TextBoxComponent;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { allowColumnSelection: true, type: 'Multiple' };
    this.pageOptions = { pageSize: 5 };
  }
  click(): void {
    this.startIndex = parseInt((this.textbox as TextBoxComponent).element.value, 10);
    this.endIndex = parseInt((this.textbox1 as TextBoxComponent).element.value, 10);
    (this.grid as GridComponent).selectionModule.clearColumnSelection();
    if (!isNaN(this.startIndex) && !isNaN(this.endIndex)) {
      (this.grid as GridComponent).selectionModule.selectColumnsByRange(this.startIndex, this.endIndex);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Select with existing column

Select with existing column provides adding a column to the current selection without clearing the existing column selection in the Grid component. This capability is valuable when expanding the selection to include additional columns while preserving previously selected columns.

To achieve this, use the selectColumnWithExisting method. This method selects a column along with an existing column by specifying the column index as a parameter.

The following example demonstrates selecting a column with an existing column. The selected column index is obtained through a textbox component and passed as an argument to the selectColumnWithExisting method. When the button event is triggered by clicking the “Select Columns” button, the specified column is selected along with any existing selections within the grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridModule, PageService, ToolbarService, GridComponent,SelectionSettingsModel, PageSettingsModel,} from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [ GridModule, TextBoxModule, ButtonModule ],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div>
          <label style="padding: 30px 17px 0 0">Enter the column index: </label>
          <ejs-textbox #textbox required width="120"></ejs-textbox>
        </div>
        <div style="padding: 10px 0 0px 13.5%">
        <button ejs-button id="button" (click)="click()">Select Columns</button>
        </div>
        <div style="padding: 20px 0px 0px 0px">
          <ejs-grid #grid [dataSource]="data" [selectionSettings]="selectionOptions">
            <e-columns>
              <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
              </e-column>
              <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
              <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
              <e-column field="Freight" headerText="Freight" format="C2" width="100">
              </e-column>
            </e-columns>
          </ejs-grid>
        </div>`
})
export class AppComponent implements OnInit {

  public data?: Object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  public startIndex?: number;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { allowColumnSelection: true, type: 'Multiple' };
    this.pageOptions = { pageSize: 5 };
  }
  click(): void {
    this.startIndex = parseInt((this.textbox as TextBoxComponent).element.value, 10);
    if (!isNaN(this.startIndex)) {
      (this.grid as GridComponent).selectionModule.selectColumnWithExisting(this.startIndex);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear column selection programmatically

Clearing column selection programmatically in the Grid component is useful for removing any existing column selections. To achieve this, use the clearColumnSelection method.

The clearColumnSelection method is applicable when the selection type is set to Multiple or Single.

The following example demonstrates clearing column selection by calling the clearColumnSelection method in the button click event.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, FilterService, GridComponent, GridModule, PageService, PageSettingsModel, SelectionSettingsModel, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [ GridModule,  TextBoxModule, ButtonModule],
    providers: [EditService, ToolbarService, PageService, FilterService],
    standalone: true,
    selector: 'app-root',
    template: `<div style="padding: 20px 0px 0px 0px">
                <button ejs-button id="button" (click)='click()'>
                clear Column Selection</button>
                </div>
                <div style="padding: 20px 0px 0px 0px">
                    <ejs-grid #grid [dataSource]='data' allowPaging=true 
                    [selectionSettings]='selectionOptions' 
                    [pageSettings]='pageOptions'>
                        <e-columns>
                            <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                            width=120></e-column>
                            <e-column field='CustomerID' headerText='Customer ID' width=120>
                            </e-column>
                            <e-column field='ShipCountry' headerText='Ship Country' width=130>
                            </e-column>
                            <e-column field='Freight' headerText='Freight' format= 'C2' 
                            width=100></e-column>
                        </e-columns>
                    </ejs-grid>
                </div>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public selectionOptions?: SelectionSettingsModel;
    public pageOptions?: PageSettingsModel;

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

    ngOnInit(): void {
        this.data = data;
        this.selectionOptions = { allowColumnSelection: true };
        this.pageOptions = { pageSize: 5 };
    }
    click(): void {
        (this.grid as GridComponent).selectionModule.clearColumnSelection()
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Column selection events

he Grid provides several events related to column selection that allow responding to and customizing the behavior of column selection. The following are the available column selection events:

columnSelecting: This event is triggered before any column selection occurs. It provides an opportunity to implement custom logic or validation before a column is selected, allowing control of the selection process.

columnSelected: This event is triggered after a column is successfully selected. Use this event to perform actions or updates when a column is selected.

columnDeselecting: This event is triggered just before a selected column is deselected. It allows performing custom logic or validation to decide whether the column should be deselected or not.

columnDeselected: This event is triggered when a particular selected column is deselected. Use this event to perform actions or validations when a column is no longer selected.

In the following example, column selection is canceled when the value of field is equal to “CustomerID” within the columnSelecting event. The “headerCell” background color changes to green when the columnSelected event is triggered and changes to red when the columnDeselecting event is triggered. A notification message is displayed to indicate which event was triggered whenever a column is selected.

import { GridModule, PageService,EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
  GridComponent,
  SelectionSettingsModel,
  PageSettingsModel,
  ColumnSelectEventArgs,
  ColumnSelectingEventArgs,
  ColumnDeselectEventArgs,
  Column,
} from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule],
  providers: [EditService, ToolbarService, PageService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `<p id="message">{{ message }}</p>
            <div style="padding: 20px 0px 0px 0px">
              <ejs-grid
                #grid
                [dataSource]="data"
                [selectionSettings]="selectionOptions"
                (columnSelected)="columnSelected($event)"
                (columnSelecting)="columnselecting($event)"
                (columnDeselected)="columnDeselected($event)"
                (columnDeselecting)="columnDeselecting($event)">
                <e-columns>
                  <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
                  width="120"></e-column>
                  <e-column field="CustomerID" headerText="Customer ID" width="120">
                  </e-column>
                  <e-column field="ShipCountry" headerText="Ship Country" width="130">
                  </e-column>
                  <e-column field="Freight" headerText="Freight" format="C2" width="100">
                  </e-column>
                </e-columns>
              </ejs-grid>
            </div>`
})

export class AppComponent implements OnInit {

  public data?: Object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  public message?: string;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { allowColumnSelection: true };
    this.pageOptions = { pageSize: 5 };
  }
  columnSelected(args: ColumnSelectEventArgs): void {
    this.message = `Trigger columnSelected`;
    (args.headerCell as HTMLElement).style.backgroundColor = 'rgb(96, 158, 101)';

  }
  columnselecting(args: ColumnSelectingEventArgs ): void {
    this.message = `Trigger columnSelecting`;
    if ((args.column as Column).field == "CustomerID")
      args.cancel = true;
  }
  columnDeselected(args: ColumnDeselectEventArgs ): void {
    this.message = `Trigger columnDeselected`;
    (args.headerCell as HTMLElement).style.backgroundColor = 'rgb(245, 69, 69)';
  }
  columnDeselecting(args: ColumnDeselectEventArgs ): void {
    this.message = `Trigger columnDeselecting`;
    if ((args.column as Column).field == "Freight")
      args.cancel = true;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));