TreeView with context menu not able to save in database.

[Yogesh Patil]

Hello Sir,

I am using treeview with context menu. When I add new node or rename node an once I click on save button the JSON has to be save in database. Next time I will take saved JSON from database and able to draw tree with saved content.

Thanks 

Yogesh

[Keerthana Rajendran]

Hi Yogesh, 

 

Thanks for contacting Syncfusion support. 

 

We checked your requirement to save the TreeView JSON in database after adding or rename operations. To do so, you can use getTreeData() method which contains the updated data source of TreeView. 

 

Refer to the following code. 

 

save(e) { 

    console.log(this.treeInstance.getTreeData()); 

  } 

 

Refer to the sample link: 

 

https://stackblitz.com/edit/angular-gguj1h?file=app.component.ts 

 

UG link:  https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/ 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Yogesh Patil]

Hello Team,

Thanks for response. The solution works fine.

Now I want to get selected node name just like node id. Is there any possible way?

Thanks,

Yogesh Patil

[Keerthana Rajendran]

Hi Yogesh, 

 

Most welcome.  

 

We are happy to hear that the provided solution helped you.  

 

With regards to your recent query to get the selected nodes name, you can pass the selected node Id to getNode or getTreeData method of TreeView which will return the complete node details of the selected node. 

 

Refer to the following code. 

 

var selectedNode = this.treeInstance.selectedNodes; 

    console.log(this.treeInstance.getTreeData()); 

    console.log(this.treeInstance.getTreeData(selectedNode[0])); 

    console.log(this.treeInstance.getNode(selectedNode[0])); 

 

Sample: https://stackblitz.com/edit/angular-gguj1h-t8kwfw?file=app.component.ts 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/treeview/#getnode 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Yogesh Patil]

Hello  Keerthana R.

Thanks for the reply.

I have already used  getTreeData function to get name of selected node by passing id. And it's working fine.

Thanks once again for support.

Thanks

Yogesh

[Keerthana Rajendran]

Hi Yogesh, 

 

  

Most welcome. We are glad to hear that the issue is resolved. Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Yogesh Patil]

Hello  Keerthana R,

Everything is working fine now. Thanks for support.

I have one more requirement, while removing any node if sub nodes are present then, it should not remove the node and give popup regarding same.

Thanks

 Yogesh P.

[Keerthana Rajendran]

Hi Yogesh, 

 

Most welcome. 

 

We checked your requirement to prevent remove action for parent node(which contains sub nodes). This requirement can be achieved by checking the hasChild field of corresponding TreeView node.  

 

Refer to the following code. 

 

this.treeInstance.getNode(targetNodeId).hasChildren ? alert('Remove is restricted for parent nodes') : this.treeInstance.removeNodes([targetNodeId]); 

 

Sample: https://stackblitz.com/edit/angular-gguj1h-c4sgjg?file=app.component.ts 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Yogesh Patil]

Hello Keerthana R.

Thanks for reply. The solution works fin for me.

I have two more requirements:

1) I have to restrict nodes to be added when level of node reached to 10.

2) Once removing node I have to update same to different table.

Thanks,

Yogesh

[Keerthana Rajendran]

Hi Yogesh, 

 

Most welcome. 

 

Query 1: I have to restrict nodes to be added when level of node reached to 10. 

 

This requirement can be achieved by adding required condition based on the sub child length before adding nodes as shown below. 

 

if (args.item.text == 'Add New Item') { 

  if ((targetNode.subChild && targetNode.subChild.length < 10) || !targetNode.subChild  ) { 

        //check required condition here before adding nodes. 

        let nodeId: string = 'tree_' + this.index; 

        let item: { [key: string]: Object } = { 

          id: nodeId, 

          name: 'New Folder', 

        }; 

        this.treeInstance.addNodes([item], targetNodeId, null); 

        this.index++; 

        this.hierarchicalData.push(item); 

        this.treeInstance.beginEdit(nodeId); 

      } 

    } 

  

Sample: https://stackblitz.com/edit/angular-gguj1h-cdbgjg?file=app.component.ts 

 

Query 2: Once removing node I have to update same to different table 

 

As explained earlier, getTreeData can be used to get the updated data source of TreeView after add/remove operations and this can be updated to required table as per your use case scenario. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R.