Cell Selection in Angular Grid component

27 Dec 202424 minutes to read

Cell selection in the Grid component allows you to interactively select specific cells or ranges of cells within the grid. This selection can be done effortlessly through mouse clicks or arrow keys (up, down, left, and right). This feature is useful when you want to highlight, manipulate, or perform actions on specific cell within the Grid.

To enable cell selection, you should set the selectionSettings.mode property to either Cell or Both. This property determines the selection mode of the grid.

Single cell selection

Single cell selection allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the grid.

To enable single cell selection, set the selectionSettings.mode property to Cell and the selectionSettings.type property to Single. This configuration allows you to select a single cell at a time within the grid.

In the following example demonstrates how to enable single cell selection using property:

app.component.ts

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

import { Component } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel } 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 = { mode: 'Cell', type: 'Single' };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple cell selection

Multiple cell selection allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data.

To enable multiple cell selection, set the selectionSettings.mode property to Cell and the selectionSettings.type property to Multiple. This configuration allows you to select and interact with multiple cells within the grid.

In the following example demonstrates how to enable multiple cell selection using property:

app.component.ts

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

import { Component } from '@angular/core';
import { data } from './datasource';
import { SelectionSettingsModel } 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 = { mode: 'Cell', type: 'Multiple' };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Cell selection mode

The cell selection mode allows you to interactively select specific cells or ranges of cells within the grid. This feature is particularly useful when you want to perform actions on specific cells or obtain data from selected cells.

The grid supports three types of cell selection mode which can be set by using selectionSettings.cellSelectionMode. These modes are:

• Flow - This is the default mode. It allows you to select a range of cells between the start index and end index, including all cells in between the rows. It provides a continuous flow of cell selection.
• Box - In this mode, you can select a range of cells within the start and end column indexes, including all cells in between the rows within the specified range. This mode is useful when you need to select cells within specific columns.
• BoxWithBorder: This mode is similar to the Box mode, but it adds borders to the selected range of cells. This visual distinction makes it easy to identify the selected cells within the grid.

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

In the following example demonstrates how to dynamically enable and change the cellSelectionMode using the DropDownList component:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'

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

@Component({
imports: [
        
        GridModule,
        DropDownListModule
    ],

providers: [EditService, ToolbarService, PageService, FilterService],
standalone: true,
  selector: 'app-root',
  template: `
         <div style="display: flex ">
              <label style="padding: 30px 17px 0 0" >Choose cell selection mode  :</label>
              <ejs-dropdownlist style="padding: 26px 0 0 0" index="0" width="150" 
              [dataSource]=" dropdownData" (change)="valueChange($event)">
              </ejs-dropdownlist>
          </div>
          <div style="padding: 20px 0px 0px 0px">
            <ejs-grid #grid [dataSource]='data' [selectionSettings]='selectionOptions' 
            height='315px'>
              <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[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public selectionOptions?: SelectionSettingsModel;
  public dropdownData: Object[] = [
    { text: 'Flow', value: 'Flow' },
    { text: 'Box', value: 'Box' },
    { text: 'BoxWithBorder', value: 'BoxWithBorder' },

  ];

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { type: 'Multiple', mode: 'Cell' };
  }
  valueChange(args: ChangeEventArgs): void {
    ((this.grid as GridComponent).selectionSettings.cellSelectionMode as CellSelectionMode) = (args.value as CellSelectionMode);
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Select cells externally

You can perform single cell selection, multiple cell selection, and range of cell selection externally in a Grid using built-in methods. This feature allows you to interact with specific cells within the Grid. The following topic demonstrates how you can achieve these selections using methods.

Single cell selection

The Angular Grid allows you to select a single cell within a grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the grid.

To achieve single cell selection, you can use the selectCell method. This method selects a cell based on the given index.

The following example demonstrates how to select a single cell within the Grid by obtaining the selected row index and cell index through a textbox component and passing these row and cell indexes as arguments to the selectCell method. When the button event is triggered by clicking the Select cell button, a single cell is selected within the Grid:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
  GridComponent,
  SelectionSettingsModel,
  PageSettingsModel,
} from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent } 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 row index: </label>
          <ejs-textbox #textbox required width="120"></ejs-textbox>
        </div>
        <div>
          <label style="padding: 30px 17px 0 0">Enter the cell index: </label>
          <ejs-textbox #textbox1 required width="120"></ejs-textbox>
        </div>
        <div style="padding: 10px 0 0px 10%">
        <button ejs-button id="button" (click)="click()">Select Cell</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 rowIndex?: number;
  public cellIndex?: number;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('textbox1') public textbox1?: TextBoxComponent;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { mode: 'Cell', type: 'Single' };
    this.pageOptions = { pageSize: 5 };
  }
  click(): void {
    this.rowIndex = parseInt((this.textbox as TextBoxComponent).element.value, 10);
    this.cellIndex = parseInt((this.textbox1 as TextBoxComponent).element.value, 10);
    if (!isNaN(this.rowIndex) && !isNaN(this.cellIndex)) {
      (this.grid as GridComponent).selectCell({ rowIndex: this.rowIndex, cellIndex: this.cellIndex });
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple cell selection

Multiple cell selection allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data.

To achieve multiple cell selection, you can use the selectCells method. This method allows you to select a collection of cells based on their row and column indexes.

In the following example, it demonstrates how to select multiple cells in the Grid by calling the selectCells method within the button click event and passing an collection of row and column indexes as arguments.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

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

@Component({
imports: [
        
        GridModule,
        TextBoxModule,
        ButtonModule
    ],

providers: [EditService, ToolbarService, PageService, FilterService],
standalone: true,
  selector: 'app-root',
  template: `
        <div style="padding: 0px 0px 20px 0px">
          <button ejs-button class="btn" (click)="buttonClick(1, 3)">
          Select [1, 3]</button>
          <button ejs-button class="btn" (click)="buttonClick(2, 2)">
          Select [2, 2]</button>
          <button ejs-button class="btn" (click)="buttonClick(0, 0)">
          Select [0, 0]</button>
        </div>
        <div style="padding: 0px 0px 20px 0px">
          <button ejs-button class="btn" (click)="buttonClick(4, 2)">
          Select [4, 2]</button>
          <button ejs-button class="btn" (click)="buttonClick(5, 1)">
          Select [5, 1]</button>
          <button ejs-button class="btn" (click)="buttonClick(3, 3)">
          Select [3, 3]</button>
        </div>
        <div style="padding: 0px 0px 20px 0px">
          <button ejs-button class="btn" (click)="buttonClick(0, 3)">
          Select [0, 3]</button>
          <button ejs-button class="btn" (click)="buttonClick(8, 1)">
          Select [8, 1]</button>
          <button ejs-button class="btn" (click)="buttonClick(8, 2)">
          Select [8, 2]</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;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { type: 'Multiple', mode: 'Cell' };
  }

  buttonClick(rowIndex: number, columnIndex: number): void {
    this.grid?.selectCells([{ rowIndex: rowIndex, cellIndexes: [columnIndex] }]);
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

Range of cell selection

Range of cell selection in the Grid allows you to select multiple cells in a continuous range. This capability is particularly useful when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data.

To achieve range of cell selection, you can use the selectCellsByRange method. This method selects a range of cells based on the specified start and end indexes.

• Range cell selection allows you to select multiple cells in box mode when cellSelectionMode is set to Box. However, if you set cellSelectionMode to Flow, it will select the range of cells between the start and end indexes, including other cells of the selected rows.
• Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

The following example demonstrates how to select a range of cells within the Grid by obtaining the selected cells start index and end index through textbox components. Then, pass these row and cell indexes as arguments to the selectCellsByRange method. When you trigger the button event by clicking the Select Cells button, a range of cells is selected within the Grid.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
  GridComponent,
  SelectionSettingsModel,
  PageSettingsModel,
} from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent } 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 row index: </label>
        <ejs-textbox #textbox required width="120"></ejs-textbox>
      </div>
      <div>
        <label style="padding: 30px 17px 0px 0px">Enter the start column index: </label>
        <ejs-textbox #textbox1 required width="120"></ejs-textbox>
      </div>
      <div>
        <label style="padding: 30px 17px 0 0">Enter the end row index: </label>
        <ejs-textbox #textbox2 required width="120"></ejs-textbox>
      </div>  
      <div>
        <label style="padding: 30px 17px 0 0px">Enter the end column index: </label>
        <ejs-textbox #textbox3 required width="120"></ejs-textbox>
        <button ejs-button id="button" (click)="click()">Select range of Cell</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 startRowIndex?:number;
  public startColumnIndex?:number;
  public endRowIndex?:number;
  public endColumnIndex?:number;
  @ViewChild('textbox') public textbox?: TextBoxComponent;
  @ViewChild('textbox1') public textbox1?: TextBoxComponent;
  @ViewChild('textbox2') public textbox2?: TextBoxComponent;
  @ViewChild('textbox3') public textbox3?: TextBoxComponent;
  @ViewChild('grid') public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { type: 'Multiple', mode: 'Cell'  };
    this.pageOptions = { pageSize: 5 };
  }
  click(): void {
    this.startRowIndex = parseInt((this.textbox as TextBoxComponent).value, 10);
    this.startColumnIndex = parseInt((this.textbox1 as TextBoxComponent).value, 10);
    this.endRowIndex = parseInt((this.textbox2 as TextBoxComponent).value, 10);
    this.endColumnIndex = parseInt((this.textbox3 as TextBoxComponent).value, 10);
    this.grid?.clearCellSelection();
    if (!isNaN(this.startRowIndex) && !isNaN(this.startColumnIndex) && !isNaN(this.endRowIndex) && !isNaN(this.endColumnIndex)) {
      (this.grid as GridComponent).selectCellsByRange({ rowIndex: this.startRowIndex, cellIndex: this.startColumnIndex }, { rowIndex: this.endRowIndex, cellIndex: this.endColumnIndex });
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

How to get selected row cell indexes

You can retrieve the collection of selected row and cell indexes of the currently selected cells in the Grid component. This is useful for performing various actions or manipulations on the selected cells within the grid. To achieve this, you can utilize the getSelectedRowCellIndexes method.

The following example demonstrates how to obtain the selected row cell indexes using the getSelectedRowCellIndexes method and display them in a dialog when a button is clicked:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DialogModule } from '@syncfusion/ej2-angular-popups'

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

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        DialogModule 
    ],

providers: [EditService, ToolbarService, PageService, FilterService],
standalone: true,
  selector: 'app-root',
  template: `
        <div style="padding: 20px 0px">
          <button ejs-button class="sample" (click)="showSelectedIndexes()">
          Show Selected Cell Indexes</button>
        </div>
        <ejs-grid #grid [dataSource]="data" allowPaging="true" 
        [selectionSettings]="selectionOptions" [pageSettings]="pageOptions">
          <e-columns>
            <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" 
            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>
        <ejs-dialog #dialogComponent [header]="'Selected Cell Indexes'" [content]="dialogContent"
          [visible]="dialogVisible" (close)="dialogClose()" showCloseIcon="true" width="350px"
          [position]='{ X: 300, Y: 100 }'>
          <ng-template #dialogContent>
            <ng-container>
              <div>
                <p><b>Selected Cell Indexes:</b></p>
                <ul>
                  <li *ngFor="let cellIndex of selectedCellIndexes">
                    Row: {{ cellIndex.rowIndex }}, cellIndex: {{ cellIndex.cellIndexes }}
                  </li>
                </ul>
              </div>
            </ng-container>
          </ng-template>
        </ejs-dialog>`
})

export class AppComponent implements OnInit {

  public data?: object[];
  public selectionOptions?: SelectionSettingsModel;
  public pageOptions?: PageSettingsModel;
  public dialogVisible: boolean = false;
  public selectedCellIndexes: ISelectedCell[] = [];
  @ViewChild('grid')
  public grid?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { mode:'Cell', type: 'Multiple', persistSelection: true };
    this.pageOptions = { pageSize: 5 };
  }
  showSelectedIndexes(): void {
    this.selectedCellIndexes = (this.grid as GridComponent).getSelectedRowCellIndexes();
    if (this.selectedCellIndexes.length > 0) {    
      this.dialogVisible = true;
    }
  }
  dialogClose(): void {
    this.dialogVisible = false;
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear cell selection programmatically

Clearing cell selection programmatically in the Grid component is a useful feature when you want to remove any existing cell selections. To achieve this, you can use the clearCellSelection method.

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

The following example demonstrates how to clear cell selection by calling the clearCellSelection method in the button click event.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'
import { EditService, ToolbarService, FilterService } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

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

@Component({
imports: [
        
        GridModule,
        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 cell 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 = { type: 'Multiple', mode: 'Cell' };
        this.pageOptions = { pageSize: 5 };
    }
    click(): void {
        (this.grid as GridComponent).clearCellSelection();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Cell selection events

The Grid provides several events related to cell selection, allowing you to respond to and customize the behavior of cell selection. Here are the available cell selection events:

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

cellSelected: This event is triggered after a cell is successfully selected. You can use this event to perform actions or updates when a cell is selected.

cellDeselecting: This event is triggered just before a selected cell is deselected. It allows you to perform custom logic or validation to decide whether the cell should be deselected or not.

cellDeselected: This event is triggered when a particular selected cell is deselected. You can use this event to perform actions or validations when a cell is no longer selected.

In the following example, cell selection is canceled when the value of ShipCountry is equal to France within the cellSelecting event. The background color changes to green when the cellSelected event is triggered, and it changes to red when the cellDeselecting event is triggered. Furthermore, the text color switches to white when the cellDeselected event is triggered. A notification message is displayed to indicate which event was triggered whenever a cell is selected.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
import { Order, data } from './datasource';
import { GridComponent, SelectionSettingsModel,PageSettingsModel,CellSelectEventArgs,CellSelectingEventArgs,
CellDeselectEventArgs} from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule],
  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"
            (cellSelected)="cellSelected($event)"
            (cellSelecting)="cellselecting($event)"
            (cellDeselected)="cellDeselected($event)"
            (cellDeselecting)="cellDeselecting($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 = { mode: 'Cell', type: 'Multiple' };
    this.pageOptions = { pageSize: 5 };
  }
  cellSelected(args: CellSelectEventArgs): void {
    this.message = ` Trigger cellSelected`;
    (args.currentCell as HTMLElement).style.backgroundColor = 'rgb(96, 158, 101)';
  }
  cellselecting(args:CellSelectingEventArgs ): void {
    this.message = `Trigger cellSelecting`;
    if ((args.data as Order).ShipCountry == 'France')
      args.cancel = true;
  }
  cellDeselected(args: CellDeselectEventArgs ): void {
    this.message = `Trigger cellDeselected`;
    if (args.cells && args.cells.length > 0) {
      (args.cells[0] as HTMLElement).style.backgroundColor = 'rgb(245, 69, 69)';
    }
  }
  cellDeselecting(args: CellDeselectEventArgs): void {
    this.message = `Trigger cellDeselecting`;
    if (args.cells && args.cells.length > 0) {
      (args.cells[0] as HTMLElement).style.color = 'rgb(253, 253, 253)';
    }  
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));