Nodes Manipulation in EJ2 TypeScript TreeView Control

3 Mar 202524 minutes to read

The TreeView control provides essential methods for dynamically managing nodes, offering the ability to create a highly interactive and customizable tree structure:

These methods provide the flexibility to add, remove, update, refresh, or relocate nodes as needed, facilitating a fully interactive and customizable TreeView structure.

Dynamically adding nodes

The addNodes method of the TreeView allows you to insert new nodes at designated positions within the TreeView by passing the necessary node information. You can add both parent and child nodes by specifying their target ID.

// Add nodes to the TreeView control using the addNodes method in the TreeView control.
import { TreeView } from '@syncfusion/ej2-navigations';

let countries: { [key: string]: 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' }
];

let treeObj: TreeView = new TreeView({
  fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
});
treeObj.appendTo('#addtree');

document.getElementById('button1')!.onclick = (): void => {
  // Add a new parent node 
  treeObj.addNodes([
    { id: 26, name: 'New Parent' },
    { id: 27, pid: 26, name: 'New Child1' },
  ]);
};

document.getElementById('button2')!.onclick = (): void => {
  // Add a new child node to the existing parent node
  treeObj.addNodes([{ id: 28, name: 'New Child2', pid: 21 }], '21', null);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <button id="button1">Add Parent</button>
            <button id="button2">Add Child</button>
            <div id="addtree"></div>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Dynamically removing nodes

The TreeView removeNodes method lets you remove multiple nodes by providing their IDs. You can remove both parent and child nodes.

// Description: This code snippet demonstrates how to remove the nodes from the TreeView control using the removeNodes method.
import { TreeView } from '@syncfusion/ej2-navigations';

let countries: { [key: string]: 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' }
];

let treeObj: TreeView = new TreeView({
  fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },
});
treeObj.appendTo('#tree');

document.getElementById('button1')!.onclick = (): void => {
  // The node with id 21 is removed from the TreeView control.
  treeObj.removeNodes(['21']);
};

document.getElementById('button2')!.onclick = (): void => {
  // The nodes with id 3 and 4 are removed from the TreeView control.
  treeObj.removeNodes(['3', '4']);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
            <button id="button1">Remove Parent</button>
            <button id="button2">Remove Child</button>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Dynamically updating nodes

The TreeView control has the updateNode method, which allows you to change a specific node’s text by providing its target (either the node ID or element) and the new text. To enable text editing, set the allowEditing property to true, ensuring the correct functionality of the updateNode method.

// Update the node text in the TreeView control
import { TreeView } from '@syncfusion/ej2-navigations';

let countries: { [key: string]: 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' }
];

let treeObj: TreeView = new TreeView({
    fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },
    allowEditing: true,
});
treeObj.appendTo('#tree');

document.getElementById('button1')!.onclick = (): void => {
    // Update the new node text for the node having id 4.
    treeObj.updateNode('4', 'Node updated');
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
            <button id="button1">Update Node</button>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Dynamically refreshing nodes

The refreshNode method in TreeView allows you to update the content of a specific node by providing its target and the new details. To retrieve the current details of the node, use the getTreeData method in conjunction with the node’s ID. This method refreshes a designated node within the TreeView.

// Description: This snippet demonstrates how to refresh the node in TreeView control.
import { TreeView } from '@syncfusion/ej2-navigations';

let countries: { [key: string]: 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' }
];

let treeObj: TreeView = new TreeView({
    fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },
});
treeObj.appendTo('#tree');

document.getElementById('button1')!.onclick = (): void => {
    var nodeData = treeObj.getTreeData('4');
    // Update the name text from backend.
    nodeData[0].name = 'Node Refreshed';
    // Refresh the updated data.
    treeObj.refreshNode('4', nodeData);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
            <button id="button1">Refresh Node</button>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Dynamically moving nodes

The moveNodes method in TreeView allows you to relocate a node by defining the node to be moved, the target location, and the index within that target. It facilitates the repositioning of nodes within the same TreeView based on the specified target.

// Description: This snippet demonstrates how to move the nodes from one parent node to another parent node in the TreeView control.
import { TreeView } from '@syncfusion/ej2-navigations';

let countries: { [key: string]: 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' }
];

let treeObj: TreeView = new TreeView({
    fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' },
});
treeObj.appendTo('#tree');

document.getElementById('button1')!.onclick = (): void => {
    // The node with id 2 is moved to the parent node with id 3 to the index of 1.
    treeObj.moveNodes(['2'], '3', 1);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
            <button id="button1">Move Node</button>
        </div>
    </div>
    <style>
        #treeparent {
            display: block;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}