Add new node to TreeView

[akhila]

I have preloaded tree View and add node button. I have one text box to enter node name and tree drop down to select the parent node.

After entering node name and parent node, I will click on add node button. On click event it should add newly entered node under specific parent node.

Please let me know how to achieve this.

 

[Hetali]

Hello Akhila,

In order to add a new node based on the parent node selected from the drop down list, use the following custom approach:

1. Get parent nodes from the TreeView data:

ngOnInit() {
  this.getParentNodes(this.data);
}

public getParentNodes(data) {
  data.map((node) => {
    if(node.items && node.items.length > 0) {
      this.parentNodes.push(node.text);
      this.getParentNodes(node.items);
    }
  });
}

2. On 'Add New Node' button click, send the textbox, dropdownlist and treeview data to search the parent node and add the new node by modifying the treeview data:

<kendo-textbox #textbox>
</kendo-textbox>

<kendo-dropdownlist #dropdownlist>
</kendo-dropdownlist>

<button kendoButton (click)="addNode(textbox, dropdownlist, treeview)">
  Add New Node
</button>

<kendo-treeview #treeview>
</kendo-treeview>

public addNode(textbox, dropdownlist, treeview) {
  let findNodeName = (node, parentNodeText) => {
    node.some((e) => {
      if(e.text == parentNodeText) {
        e.items.push({text: textbox.value});
      }
      else if(e.items) { 
        findNodeName(e.items, parentNodeText);
      }
    });
  }
  findNodeName(treeview.data._value, dropdownlist.text);
}

In this StackBlitz example, based on the parent node, a new child node is added in the Kendo UI TreeView.

I hope this helps.

Regards,
Hetali
Progress Telerik