How to Expand Item on Mouse Over in TreeView Component

By default each item in TreeView component expands only by click on its expand box or if item text is double-clicked. There may be cases when you may need to expand the item by simply hovering over its space. In following section we will show you how to do it.

The sample code below shows how to expand tree view items on mouse over in each JavaScript framework: Angular, React and Vue.

Whenever you move the mouse cursor over item space in this example, the item will auto-expand. This happens only if the mouse cursor hovers over item space within small period of time of 500ms. This delay is to prevent accidentaly expanding items, if you quickly move the mouse cursor over TreeView.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Expand Tree Item on Mouse Over

TreeView has an event called itemHover which is fired only when mouse cursor moves over item space. You can handle this event in your code to get the item that is currently hovered and add some specific action, like expanding the hovered item. This event by default doesn’t do anything. You need to handle it and add our code specifying some action.

• JavaScript
• Angular
• React
• Vue

In this code, to prevent items from expandingaccidentally, we have set at timeout with delay of 500ms before item is expaded. If the mouse cursor hovers over the item space at least hald a second the item will expand by calling the expand method. Otherwise, the expanding is cancelled and the timer resets.

Conclusion

In some cases, you may need to auto-expand the item when mouse hovers over its space. In TreeView component you can achieve this process by simply handling an event that is fired whenever mouse cursor moves over tree items. To prevent any accidental expanding of tree items you can customize the event handler and add timers that will execute and expand the item only when conditions are met.

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.