Tree Node

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>