Tree Node

14 Aug 20184 minutes to read

TreeView node is structured with expand/collapse arrow, checkbox, image and text as shown in below.

Also TreeView node object holds the following properties.

Properties	Data Type	Description
checked	Boolean	Checked state of the node
count	Number	Number of child
expanded	Boolean	Expanded state of the node
index	Number	Index of the node
level	Number	Level of the node
id	String	Node id
parentId	String	Parent id of the node
selected	Boolean	Selected state of the node

Node Manipulations

You can perform following operation in tree nodes and the modified node values can be saved in database.

Expand or Collapse node

Tree nodes can be expanded or collapsed by clicking the expand/collapse icon of the node or in code behind by using the following methods.

Methods	Description
expandNode	Expands the node with specified id
collapseNode	Collapse the node with specified id
expandAll	Expands all the node
collapseAll	Collapse all the node

Also you can get all the expanded nodes index in tree by using getExpandedNodesIndex method, which returns the array of expanded node indices.

Editing

You can directly edit the tree node’s text in-place by double-click on the tree node or select the tree node and press F2 key. The editing works only if the allowEditing property is true in TreeView control. When editing is completed by focus out or “enter” key press, the modified node’s text is saved automatically. The nodeEdit event will be triggered whenever edited the TreeView node.
Also beforeEdit event will be triggered before the TreeView node change into editing mode.

HTML

// Initialize and bind the TreeView with allowEditing property

 <ej-treeview id="dragdrop" [fields]='field' [allowEditing]='allowediting'></ej-treeview>

HTML

<script>

import { Component, Inject } from '@angular/core';

@Component({
    selector: 'control-content',
    templateUrl: 'app/components/treeview/editing.component.html'
})
export class editingTreeViewComponent {

   public hierarchicalData: Object[] = [
        {
            id: 1, name: 'ASP.NET MVC Team', expanded: true,
            child: [
                { id: 2, parentId: 1, name: 'Smith', isSelected: true },
                { id: 3, parentId: 1, name: 'Johnson', isSelected: true },
                { id: 4, parentId: 1, name: 'Anderson' },
            ]
        },
        {
            id: 5, name: 'Windows Team',
            child: [
                { id: 6, parentId: 5, name: 'Clark' },
                { id: 7, parentId: 5, name: 'Wright' },
                { id: 8, parentId: 5, name: 'Lopez' },
            ]
        },
        {
            id: 9, name: 'Web Team',
            child: [
                { id: 11, parentId: 9, name: 'Joshua' },
                { id: 12, parentId: 9, name: 'Matthew' },
                { id: 13, parentId: 9, name: 'David' },
            ]
        },
        {
            id: 14, name: 'Build Team',
            child: [
                { id: 15, parentId: 14, name: 'Ryan' },
                { id: 16, parentId: 14, name: 'Justin' },
                { id: 17, parentId: 14, name: 'Robert' },
            ]
        },
        {
            id: 18, name: 'WPF Team',
            child: [
                { id: 19, parentId: 18, name: 'Brown' },
                { id: 20, parentId: 18, name: 'Johnson' },
                { id: 21, parentId: 18, name: 'Miller' },
            ]
        }
    ];
    public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'child', selected: 'isSelected' };
    public allowEditing:boolean = true;
}

<script>