Checkbox selection in Angular Grid component

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

Conditional row selection

The isRowSelectable callback determines which rows in the Data Grid can be selected. It evaluates each row’s data and returns true for rows that should be selectable and false for those that should not.

Local data: The callback runs once when the grid initializes and evaluates all records because the full dataset is already available on the client.

Remote data: The callback runs only for the rows displayed on the current page when the grid first loads. It runs again whenever the grid fetches new data such as during paging, filtering, or sorting to re-evaluate the newly visible rows.

In the example below, it prevents selection of rows with canceled orders.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SelectionSettingsModel, ColumnModel, EditService, EditSettingsModel, FilterService, FilterSettingsModel, 
 GridModule, PageService, SortService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { ordersTrackData, OrderTrackModel } from './datasource';

@Component({
    imports: [ GridModule ],
    providers: [PageService, SortService, EditService, ToolbarService, FilterService,],
    standalone: true,
    selector: 'app-root',
    template:`<ejs-grid [dataSource]='data' [allowPaging]='true' [editSettings]='editSettings' 
               [toolbar]='toolbar' [allowSelection]='true' [selectionSettings]='selectionOptions'
               [allowFiltering]="true" [filterSettings]="filterSettings" [allowSorting]="true" 
               (isRowSelectable)='isRowSelectable'>
                <e-columns>
                    <e-column type='checkbox' width='50' ></e-column>
                    <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' [validationRules]='orderIDRules' textAlign='Right' width='110' ></e-column>
                    <e-column field='CustomerName' headerText='Customer Name' [validationRules]='customerNameRules' width='120' ></e-column>
                    <e-column field='Product' headerText='Product' editType= 'dropdownedit' width='110' ></e-column>
                    <e-column field='Amount' headerText='Amount' [validationRules]='amountRules' format='C2' textAlign='Right' width='110' ></e-column>
                    <e-column field='OrderDate' headerText='Order Date'  editType= 'datepickeredit' format='yMd' textAlign='Right' width='110' ></e-column>
                    <e-column field='Status' headerText='Order Status' editType= 'dropdownedit' width='110' ></e-column>
                </e-columns>
             </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    public selectionOptions?: SelectionSettingsModel;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public filterSettings?: FilterSettingsModel;
    public orderIDRules?: object;
    public customerNameRules?: object;
    public amountRules?: object;

    ngOnInit(): void {
        this.data = ordersTrackData;
        this.selectionOptions = { persistSelection: true };
        this.editSettings = { allowEditing: true, allowAdding: false, allowDeleting: false };
        this.toolbar = ['Edit', 'Update', 'Cancel'];
        this.filterSettings= { type: 'Excel' }
        this.orderIDRules = { required: true };
        this.customerNameRules = { required: true };
        this.amountRules={required: true, }
    }
    public isRowSelectable (data: OrderTrackModel, columns: ColumnModel[]) {
        return data.Status !== 'Cancelled';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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