Dynamically add node to Kendo react treeview

1 Answer 283 Views
TreeView
Nithya
Top achievements
Rank 1
Iron
Nithya asked on 14 Mar 2023, 07:24 AM

Hi Team,

I need to build a treeview kind of feature where I can dynamically add child nodes .when user click parent node a button can be used to add child nodes.
Something like below attached snapshot. I surfed for examples but couldn't make out. Kindly share some reference to achieve this.

1 Answer, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 15 Mar 2023, 05:49 PM

Hello, Nithya,

Thank you for the provided screenshot.

You can achieve this by rendering an external Button under the TreeView which opens a Window component. In the Window component, you can render an Input and update the data with the entered input value.

In the below example, I am rendering a Button that opens a Window component in its `onClick` handler. The button is shown when a parent node is clicked, and removed when a child item is clicked. I achieved this using the TreeView onItemClick handler. In addition, the opened Window contains an Input, and a submit button that calls the `handleSubmit` event which updates the data with the entered input value based on the parent name.

I hope this matches what you need, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nithya
Top achievements
Rank 1
Iron
commented on 16 Mar 2023, 07:06 AM

Thank you so much. This helps.

Now that I want to make child as sub parent and add child nodes to that. I will explore and try out on this. 
Will reach out if any issues on the same :)
Wissam
Telerik team
commented on 16 Mar 2023, 12:53 PM

You are welcome, Nithya! I will be glad to help if you need any assistance on this matter.

Tags
TreeView
Asked by
Nithya
Top achievements
Rank 1
Iron
Answers by
Wissam
Telerik team
Share this question
or