HelpBot Assistant

How can I help you?

Check box Selection in Angular Grid Component

3 Mar 202622 minutes to read

Checkbox selection provides functionality to select multiple grid records through checkboxes in each row. This selection method allows efficient bulk operations on selected records within the grid.

To render checkboxes in each grid row, configure a checkbox column by setting the column type property to checkbox.

Here’s an example of enabling checkbox selection using the type property in the Grid component:

import { data } from './datasource';
import { Component, OnInit } 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 [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));

Selection can be persisted on all the operations using selectionSettings.persistSelection property. For persisting selection on the grid, any one of the column should be defined as a primary key using isPrimaryKey property.

Checkbox selection mode

The checkbox selection mode provides two options that can be configured through the selectionSettings.checkboxMode property:

  • Default: This mode allows multiple row selection by clicking rows sequentially. When a row is clicked, the associated checkbox switches to the “checked” state.
  • ResetOnRowClick: This mode resets previously selected rows when a new row is clicked. Multiple selections remain possible using CTRL + Click for individual rows or SHIFT + Click for row ranges.

In the following example, it demonstrates dynamically configuring the checkboxMode using the DropDownList component:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckboxSelectionType, EditService, FilterService, GridComponent, GridModule, PageService, SelectionSettingsModel, ToolbarService } 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: 5px 5px 0 0" >Choose checkbox selection mode:
                </label>
                <ejs-dropdownlist index="0" width="150" 
                [dataSource]=" dropdownData" (change)="valueChange($event)">
                </ejs-dropdownlist>
              </div>
            <div style="padding: 5px 0px 0px 0px">
                <ejs-grid #grid [dataSource]='data' [selectionSettings]='selectionOptions' 
                height='295px'>
                    <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

When the column type is set to checkbox, a select-all checkbox appears in the column header by default. To hide the select-all checkbox, define an empty HeaderTemplate directive in the grid column.

Here’s an example of hiding selectall checkbox in column header using empty HeaderTemplate directive in the Grid component:

import { data } from './datasource';
import { Component, OnInit } 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 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 can be selected by evaluating each row’s data and returning true for selectable rows and false for those that should not be selectable.

Local data: The callback executes once during grid initialization, evaluating all records because the full dataset is available on the client side.

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

The example below prevents selection of rows with canceled orders:

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' height="245" [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

Single-row selection in checkbox mode ensures that only one row remains selected at a time, with any previous selections cleared when a new row is selected.

To configure single-row selection in checkbox mode, handle the rowSelecting event and use the clearSelection method to clear previous selections before selecting a new row.

When the checkboxMode property is set to ResetOnRowClick, clicking a new row automatically resets the previously selected row. This behavior applies to row clicks rather than checkbox clicks and represents the default grid behavior.

Here’s an example of selecting a single row in checkbox selection mode using the clearSelection method along with the rowSelecting event:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { EditService, FilterService, GridComponent, GridModule, PageService, RowSelectingEventArgs, SelectionService, SelectionSettingsModel, ToolbarService } 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

By default, the Grid component allows selection by clicking either a grid row or the checkbox within that row. To restrict selection to checkbox clicks only, set the selectionSettings.checkboxOnly property to true.

import { data } from './datasource';
import { Component, OnInit } 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 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));