Checkbox selection in Angular Grid component

17 Sep 202523 minutes to read

Checkbox selection in the Grid component enables the selection of multiple records by displaying a checkbox in each row. This feature is particularly helpful for performing bulk actions or operations on selected records.

To add a checkbox in each row, use a column with type property set to checkbox.

Example: Enable checkbox selection using the type property in the Grid component:

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, OnInit } 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 [dataSource]='data' height='315px'>
                <e-columns>
                    <e-column type='checkbox' width='50'></e-column>
                    <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>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;

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

By default, selection is allowed by clicking either a grid row or the checkbox within that row. To restrict selection so it is only possible via checkboxes, set selectionSettings.checkboxOnly to true.
To persist selection across operations, set selectionSettings.persistSelection to true. Persisted selection requires a primary key column defined via columns.isPrimaryKey.

Checkbox selection mode

Checkbox selection mode allows selecting rows via checkboxes or clicking directly on the rows. This can be controlled with selectionSettings.checkboxMode:

  • Default: Multiple rows can be selected by clicking one row at a time. Clicking a row toggles its checkbox.
  • ResetOnRowClick: Clicking a row resets previous selections. To select multiple rows, press and hold the CTRL key; to select a range, hold SHIFT and click the rows.

Example: Dynamically enable and change the checkboxMode using the DropDownList component:

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 { CheckboxSelectionType, 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 checkbox 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 type='checkbox' width='50'></e-column>
                        <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: 'Default', value: 'Default' },
    { text: 'ResetOnRowClick', value: 'ResetOnRowClick' }
  ];

  ngOnInit(): void {
    this.data = data;
  }
  valueChange(args: ChangeEventArgs): void {
    ((this.grid as GridComponent).selectionSettings.checkboxMode as CheckboxSelectionType) = (args.value as CheckboxSelectionType);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide select-all checkbox in column header

The select-all checkbox in the column header can be hidden for customization by defining an empty HeaderTemplate in the grid column.

Example: Hide the select-all checkbox using an empty HeaderTemplate:

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, OnInit, ViewChild } 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 type="checkbox" width="120" >
                <ng-template #headerTemplate>
                </ng-template>
            </e-column>        
            <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 implements OnInit {

  public data?: object[];
  public selectionOptions?: SelectionSettingsModel;

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

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

Prevent specific rows from being selected in checkbox selection

To prevent certain rows from being selected based on specific conditions, use the rowDataBound event. Set the isSelectable argument to false for those rows.

Example: Prevent row selection using the isSelectable argument in rowDataBound:

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, OnInit, ViewChild } from '@angular/core';
import { data ,Order} from './datasource';
import { GridComponent, SelectionSettingsModel, FilterSettingsModel, PageSettingsModel, ToolbarItems, EditSettingsModel, RowDataBoundEventArgs } 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' [allowFiltering]='true' 
             [allowSelection]='true' [selectionSettings]='selectionOptions' 
             [editSettings]='editSettings' [toolbar]='toolbar' 
             [pageSettings]='pageOptions' [filterSettings]='filterOptions' 
             (rowDataBound)='rowDataBound($event)'>
                <e-columns>
                    <e-column type='checkbox' width=120></e-column>
                    <e-column field='List' headerText='List' width=120></e-column>
                    <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' 
                    textAlign='Right' width=150></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='EmployeeID' headerText='Employee ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                </e-columns>
             </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;
    public editSettings?: EditSettingsModel;
    public pageOptions?: PageSettingsModel;
    public toolbar?: ToolbarItems[] | object;
    public filterOptions?: FilterSettingsModel;

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

    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
        this.selectionOptions = { type: 'Multiple', persistSelection: true };
        this.pageOptions = { pageSize: 5 };
        this.filterOptions = { type: 'CheckBox' };
        for (let i: number = 0; i < data.length; i++) {
            (data as Order[])[i as number]['List'] = i + 1;
        }
    }
    public rowDataBound(args: RowDataBoundEventArgs): void {
        args.isSelectable = (args.data as Order).List % 5 === 0;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

How to select a single row in checkbox selection mode

To allow only one row to be selected at a time in checkbox selection mode, use the rowSelecting event to call the clearSelection method before making a new selection.

With checkboxMode set to ResetOnRowClick, the previously selected row is reset automatically when a new row is selected (row only, not checkbox).

Example: Enable single-row selection using the clearSelection method in rowSelecting:

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

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

@Component({
imports: [
        
        GridModule
    ],

providers: [EditService, ToolbarService, PageService, FilterService, SelectionService],
standalone: true,
  selector: 'app-root',
  template: `
      <ejs-grid #grid [dataSource]="data" allowPaging="true" 
      (rowSelecting)="rowselecting($event)" [selectionSettings]="selectionOptions" >
        <e-columns>
          <e-column type="checkbox" width="100"></e-column>
          <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 implements OnInit {

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

  ngOnInit(): void {
    this.data = data;
    this.selectionOptions = { type: 'Single', checkboxMode: 'ResetOnRowClick' };
  }
  rowselecting(args: RowSelectingEventArgs): void {  
    if (args.target && args.target.classList.contains('e-icons'))
      (this.grid as GridComponent).clearSelection();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Allow selection only through checkbox click

To restrict selection so it is only performed by clicking on checkboxes, set selectionSettings.checkboxOnly to true.

Here’s an example of how to enable selection only through checkbox click using checkboxOnly property:

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, OnInit, ViewChild } 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 type="checkbox" width="100"></e-column>
            <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 implements OnInit {

  public data?: object[];
  public selectionOptions?: SelectionSettingsModel;

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

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