Cell selection in Angular Treegrid component
27 Apr 202410 minutes to read
Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right).
TreeGrid supports two types of cell selection mode which can be set by using selectionSettings.cellSelectionMode
. They are:
-
Flow
- TheFlow
value is set by default.
Select range of cells between the start index and end index which includes in between cells of rows. -
Box
- Select range of cells within the start and end column indexes which includes in between cells of rows within the range.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height=250 [treeColumnIndex]='1' [allowPaging]='true' childMapping='subtasks' [selectionSettings]='selectionOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public selectionOptions?: SelectionSettingsModel;
ngOnInit(): void {
this.data = sampleData;
this.selectionOptions = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' };
}
}
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 beCell
orBoth
.
Perform cell selection programmatically
To perform cell selection programmatically, you can use selectCell
method. To use this method you need to pass the cellIndex as parameter like in the below sample.
To clear the selected rows or cells, by calling the clearSelection
method in tree grid.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { EditSettingsModel, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid'
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<button ej-button id='selectCell' (click)='selectCell()'>Select Cell</button>
<button ej-button id='clear' (click)='clear()'>Clear selection</button>
<ejs-treegrid #treegrid [dataSource]='data' height=250 [treeColumnIndex]='1' [editSettings]='editSettings' [allowPaging]='true' childMapping='subtasks' [selectionSettings]='selectionOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public editSettings?: EditSettingsModel;
public data: Object[] = [];
public selectionOptions?: SelectionSettingsModel;
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Cell" };
this.selectionOptions = { cellSelectionMode: 'Flow', type: 'Multiple', mode: 'Cell' };
}
selectCell() {
this.treegrid?.selectCell({ rowIndex: 3, cellIndex: 1 });
}
clear() {
this.treegrid?.clearSelection();
}
}
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 in tree grid
To get the selected row cell index, Use getSelectedRowCellIndexes
method in the treegrid.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, SelectionSettingsModel } from '@syncfusion/ej2-angular-treegrid'
import { CellSelectEventArgs } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule
],
providers: [PageService,
SortService,
FilterService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' (cellSelected)='cellSelected($event)' height=250 [treeColumnIndex]='1' [allowPaging]='true' childMapping='subtasks' [selectionSettings]='selectionOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[] = [];
public selectionOptions?: SelectionSettingsModel;
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.selectionOptions = { cellSelectionMode: 'Flow', type: 'Multiple', mode:'Cell' };
}
cellSelected(args: CellSelectEventArgs) {
var cellSelected: object[] = this.treegrid?.getSelectedRowCellIndexes() as object[];
var cellSelectedCount: number = cellSelected.length;
alert('Selected row cell count : ' + cellSelectedCount)
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));