Multi Selection in Angular Tree View

31 Aug 202613 minutes to read

The TreeView component supports selecting multiple nodes simultaneously, enabling users to perform batch operations on several items. Visual indicators highlight the chosen nodes and confirm the selection state.

The TreeView supports multiple node selection by setting the allowMultiSelection property to true.

Enabling multiple selection

To select multiple nodes, use these keyboard combinations:

• Hold the CTRL key and click the desired nodes to add or remove them from the selection.
• Hold the SHIFT key and click a node to select a continuous range from the last selected node to the clicked node.

In the following example, the allowMultiSelection property is enabled to demonstrate multiple node selection.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the TreeView component
    template: `<div id='treeparent'><ejs-treeview id='treeelement' [fields]='field' [allowMultiSelection]='allowMultiSelection'></ejs-treeview></div>`
})
export class AppComponent {
    @ViewChild('samples')
    public tree?: TreeViewComponent;
    constructor() {
    }
    // defined the array of data
    public countries: Object[] = [
        { id: 1, name: 'Australia', hasChild: true, expanded: true },
        { id: 2, pid: 1, name: 'New South Wales', isSelected: true },
        { id: 3, pid: 1, name: 'Victoria' },
        { id: 4, pid: 1, name: 'South Australia' },
        { id: 6, pid: 1, name: 'Western Australia', isSelected: true },
        { id: 7, name: 'Brazil', hasChild: true },
        { id: 8, pid: 7, name: 'Paraná' },
        { id: 9, pid: 7, name: 'Ceará' },
        { id: 10, pid: 7, name: 'Acre' },
        { id: 11, name: 'China', hasChild: true },
        { id: 12, pid: 11, name: 'Guangzhou' },
        { id: 13, pid: 11, name: 'Shanghai' },
        { id: 14, pid: 11, name: 'Beijing' },
        { id: 15, pid: 11, name: 'Shantou' },
        { id: 16, name: 'France', hasChild: true },
        { id: 17, pid: 16, name: 'Pays de la Loire' },
        { id: 18, pid: 16, name: 'Aquitaine' },
        { id: 19, pid: 16, name: 'Brittany' },
        { id: 20, pid: 16, name: 'Lorraine' },
        { id: 21, name: 'India', hasChild: true },
        { id: 22, pid: 21, name: 'Assam' },
        { id: 23, pid: 21, name: 'Bihar' },
        { id: 24, pid: 21, name: 'Tamil Nadu' },
        { id: 25, pid: 21, name: 'Punjab' }
    ];
    // maps the appropriate column to fields property
    public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
    // set the Multi Selection option to TreeView
    public allowMultiSelection: boolean = true;
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

main.ts

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

Multiple selection is not supported through touch interactions on mobile devices.

Managing selected nodes

Control and retrieve selected nodes using the selectedNodes property. This property accepts and returns an array of selected node IDs (string[]), allowing both initial configuration and dynamic updates.

Setting selected nodes programmatically

Bind selectedNodes from the component class to seed the initial selection, or assign to the property to update the selection at runtime:

@Component({
  selector: 'app-container',
  template: `<ejs-treeview id='tree' [fields]='field' [selectedNodes]='selectedNodeIds'></ejs-treeview>`
})
export class AppComponent {
  public field: Object = { dataSource: this.localData, id: 'id', text: 'name', parentID: 'pid' };
  public selectedNodeIds: string[] = ['1', '3'];

  // To update at runtime:
  // this.selectedNodeIds = ['2', '4'];
}

Selection events

The TreeView provides events to handle selection changes:

• The nodeSelecting event triggers before a node selection occurs. Set args.cancel = true in the event handler to cancel the selection.
• The nodeSelected event triggers after a node selection is completed successfully. Inspect args.action to determine whether the change was a select or un-select, and args.nodeData for the selected node record.

In the following example, New South Wales and Western Australia nodes are pre-selected at initialization. The selection events display alerts showing the selected node information.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';
import { NodeSelectEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the TreeView component
    template: `<div id='treeparent'><ejs-treeview #tree id='treeelement' [fields]='field' [allowMultiSelection]='allowMultiSelection' [selectedNodes]='selectedNodes' (nodeSelected)='nodeSelected($event)'></ejs-treeview></div>`
})
export class AppComponent {
    @ViewChild('tree')
    public tree?: TreeViewComponent;

    constructor() {
    }
    // defined the array of data
    public countries: Object[] = [
        { id: 1, name: 'Australia', hasChild: true, expanded: true },
        { id: 2, pid: 1, name: 'New South Wales', isSelected: true },
        { id: 3, pid: 1, name: 'Victoria' },
        { id: 4, pid: 1, name: 'South Australia' },
        { id: 6, pid: 1, name: 'Western Australia', isSelected: true },
        { id: 7, name: 'Brazil', hasChild: true },
        { id: 8, pid: 7, name: 'Paraná' },
        { id: 9, pid: 7, name: 'Ceará' },
        { id: 10, pid: 7, name: 'Acre' },
        { id: 11, name: 'China', hasChild: true },
        { id: 12, pid: 11, name: 'Guangzhou' },
        { id: 13, pid: 11, name: 'Shanghai' },
        { id: 14, pid: 11, name: 'Beijing' },
        { id: 15, pid: 11, name: 'Shantou' },
        { id: 16, name: 'France', hasChild: true },
        { id: 17, pid: 16, name: 'Pays de la Loire' },
        { id: 18, pid: 16, name: 'Aquitaine' },
        { id: 19, pid: 16, name: 'Brittany' },
        { id: 20, pid: 16, name: 'Lorraine' },
        { id: 21, name: 'India', hasChild: true },
        { id: 22, pid: 21, name: 'Assam' },
        { id: 23, pid: 21, name: 'Bihar' },
        { id: 24, pid: 21, name: 'Tamil Nadu' },
        { id: 25, pid: 21, name: 'Punjab' }
    ];
    // maps the appropriate column to fields property
    public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
    // set the Multi Selection option to the TreeView
    public allowMultiSelection: boolean = true;
    //set the Selected nodes to the TreeView
    public selectedNodes: string[] = ['2', '6'];
    //Bind the nodeSelected event
    public nodeSelected(e: NodeSelectEventArgs) {
        alert("The selected node's id: " + this.tree?.selectedNodes); // To alert the selected node's id.
    };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

main.ts

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

See Also

• How to hover and select the multiple line tree nodes

• How to select only one child at a time, out of one specific parent