Multiple Selection

20 Aug 20186 minutes to read

TreeView supports to select the multiple nodes by specifying allowMultiSelection as true. It allows you to select more than one nodes in TreeView.

HTML

<ej-treeview id='treeview' [fields]='fields' [allowMultiSelection]='allowMultiSelection'></ej-treeview>

HTML

<script>

import { Component } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-ng-navigations';

@Component({
    selector: 'app-container',
    templateUrl: 'app/components/treeview/treeview.component.html'',
})
export class AppComponent {
    constructor() {
    }
    public localData : any = [
          { id: 1, name: { nodeName: "Discover Music"}, hasChild: true, expanded: true },
          { id: 2, parent: 1, name: {nodeName:"Hot Singles" }},
          { id: 3, parent: 1, name: {nodeName:"Rising Artists" }},
          { id: 4, parent: 1, name:{nodeName: "Live Music" }}];

    public fields:any = { id: "id", parentId: "parent", text: "name.nodeName", hasChild: "hasChild", dataSource: this.localData, expanded: "expanded" }
    public allowMultiSelection: boolean = true;
}

</script>

Select Nodes

To select more than one nodes of TreeView, you can use selectedNodes property. It will select the TreeView nodes from the given indexes.

HTML

<ej-treeview id='treeview' [fields]='fields' [allowMultiSelection]='allowMultiSelection'></ej-treeview>

  <input type="button" ej-button id="button" value="Button" (ejclick)="treeSelect($event)" />

HTML

<script>

import { Component } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-ng-navigations';

@Component({
    selector: 'app-container',
    templateUrl: 'app/components/treeview/treeview.component.html'',
})
export class AppComponent {
     public localData : any = [
          { id: 1, name: { nodeName: "Discover Music"}, hasChild: true, expanded: true },
          { id: 2, parent: 1, name: {nodeName:"Hot Singles" }},
          { id: 3, parent: 1, name: {nodeName:"Rising Artists" }},
          { id: 4, parent: 1, name:{nodeName: "Live Music" }}];

    public fields:any = { id: "id", parentId: "parent", text: "name.nodeName", hasChild: "hasChild", dataSource: this.localData, expanded: "expanded" }
    public allowMultiSelection: boolean = true;
    constructor() {
    }
    treeSelect(){
        // create instance for TreeView
		var treeObj = $("#treeview").data("ejTreeView");
        treeObj.option("selectedNodes", [0, 2, 3]); //select the TreeView nodes from the given indexes
    }
   
}

</script>

Get Selected Nodes

To get the selected Nodes of TreeView, you can use getSelectedNodes method. It returns the collections of TreeView selected nodes.
You can use getSelectedNodesIndex method to get the index positions of currently selected nodes.

HTML

<ej-treeview id='treeview' [fields]='fields' [allowMultiSelection]='allowMultiSelection'></ej-treeview>

  <input type="button" ej-button id="button" value="Button" (ejclick)="getTreeSelectNodes($event)" />

HTML

<script>

import { Component } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-ng-navigations';

@Component({
    selector: 'app-container',
    templateUrl: 'app/components/treeview/treeview.component.html'',
})
export class AppComponent {
     public localData : any = [
          { id: 1, name: { nodeName: "Discover Music"}, hasChild: true, expanded: true },
          { id: 2, parent: 1, name: {nodeName:"Hot Singles" }},
          { id: 3, parent: 1, name: {nodeName:"Rising Artists" }},
          { id: 4, parent: 1, name:{nodeName: "Live Music" }}];

    public fields:any = { id: "id", parentId: "parent", text: "name.nodeName", hasChild: "hasChild", dataSource: this.localData, expanded: "expanded" }
    public allowMultiSelection: boolean = true;
    constructor() {
    }
    getTreeSelectNodes(){
        // create instance for TreeView
		var treeObj = $("#treeview").data("ejTreeView");
        treeObj.getSelectedNodes(); //returns the collections of TreeView selected nodes
    }
   
}

</script>