Make node information editable within a Drag and Drop Treeview

[Christine Piffat]

I am looking into various options for treeview type controls and wanted to know if there were a way to make some of the information in the treeview nodes editable. I set up a quick demo based on the drag and drop demo available.

I seem to be able to add various input types, but the cursor is always a pointer and it will not allow me to edit the data. Is there a way to allow the cursor to be a pointer for the drag and drop capability everywhere except over an input? Is there some other way to handle this approach?

Thank you in advance!  

Attachment: wbic1s.run_5503c917.zip

[Keerthana Rajendran]

Hi Christine, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query “edit the TreeView node”. In TreeView component, we have provided an allowEditing API for node editing . While double clicking the TreeView node, you can able to edit the TreeView text. Also, we have a beginEdit() method, it helps you to edit the particular node by passing the ID. 

 

For your reference, we have prepared a simple sample for node editing. Refer the sample link below. 

https://stackblitz.com/edit/angular-5qr6bv-j6nuf6?file=app.component.html 

 

To know more about the TreeView component, Refer the below links. 

UG Document - https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/ 

Demo Link - https://ej2.syncfusion.com/angular/demos/#/material/treeview/node-editing 

API Reference - https://ej2.syncfusion.com/angular/documentation/api/treeview/#allowediting 

 

Please let us know, if you need further assistance on this. 

 

Regards, 

Keerthana.