Custom Label Editing in TreeView Component
To edit the item label in TreeView component, you can add a toolbar with edit button that when clicked will open custom editor. Then using this editor you can change the item label on demand. In this article, you will learn how to show an edit button on mouse over item space and how to edit the item label with custom editor set in your code.
The sample code below shows how to add an editor to tree view items and change their label during run-time, in each JavaScript framework: Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, when you move the mouse cursor over item space, a button with pencil icon will appear on item right side. When you click this button, a text editor replaces the item label. By entering a new text and pressing the ENTER key you can replace the item label with a new one. Pressing the ESCAPE key will close the editor and cancel any change to the item label.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Show Edit Button on Mouse Over
To show a custom edit button whenever mouse cursor moves over item space, you can use the itemHoverTemplate property. This property allows you to add custom HTML elements that will appear on top of item content, only when item is hovered.
In this case, this template contains a single button represented by a pencil icon. The template content contains <div> and <span> elements where for the background of the <span> element an icon is used.
When using templates, Lit Element syntax is required, so that the return value is a html object constructed with HTML elements.
As a result when this template is applied, during hovering over items in TreeView, the edit button will appear over each item hovered.
The showEditor function is called, when edit button is clicked. Inside this function, you can save the item object that is currently editing, original label so we can reverse any change if editing is canceled, and also show a text editor after a small delay so that the editor will receive the input focus.
How to Edit Item Label in TreeView
Now, clicking on edit button should open up a text editor where you can enter a new label. For this to work, you also need to create a template for item content, this time using the itemTemplate property.
The content of this template, will replace the default item content. As text editor, you can use the standard input element, which you only want to show it for the item that is currently editing. All other items will use the default template, showing the item label.
You need to set up a local variable named editItem, which value is set when edit button is clicked. Using this variable, you can set a condition in the item template that will determine whether the item shows a label or a text editor.
Once text editor opens, you can enter a new label for the currently editing item. To save any changes from the editor, you need to handle the standard keydown event. Depending on which key is pressed, a different action applies.
- Pressing the ENTER key - confirms the change and replace the old item label with a new one
- Pressing the ESCAPE key - cancels the change and reverse back the item label to its original text
In addition, you need to handle event when the use exits the editor by clicking outside of the text editor. When this happens, the editor losses its input focus and you handle this by canceling the change. For this purpose, handling the blur event and closing the editor will do the work.
Conclusion
Using templates n TreeView component, you can add an edit button that will appear on mouse over item space and add a custom text editor with which you can change item label. For edit button, you can use custom icon, and for text editor the standard input box. Then you only need to connect clicks on edit button and changes from the input element by handling events and set a new label for each item.
IntegralUI Web is an UI library of native web components that includes the TreeView. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.