How to Highlight Items in TreeView Component

There are many ways to highlight items in IntegralUI TreeView component. You can use CSS classes or dynamic styles set in code to change the appearance of tree items, based on custom conditions set in your code. One way to highlight items is to use their check box, whenever it is checked the item is marked and will appear as highlighted with additional colors.

There is a sample code below written in JavaScript, Angular, React and Vue that shows how to highlight items in the TreeView.

As demo shows, checking items will add a light green line on the left side of the node, while its label will appear in bold. For demonstration purposes, in this example only child items have a check box.

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

Items with Different Colors

The best way to change appearance of items during run-time is by using dynamic styles. Each item can have a different CSS style applied depending on some condition set in code, for each item state: disabled, normal, hovered or selected.

Related: Even/Odd Items In TreeView

In this example, to highlight an item you need to check it first. The style used to change appearance of the items when they are highlighted, needs to be applied for each item state. In that way, the marked item will appear the same regardless of its state:

• JavaScript
• Angular
• React
• Vue

In this case, the applied style changes the left border thicker and in light green color. In addition, the item label appears in bold font. Once the style is applied, you need to update the TreeView using refresh method.

Conclusion

Highlighting items can help you to distinguish them from other nodes in tree hierarchy. In IntegralUI TreeView component, you can highlight items in different ways by changing the CSS classes or using styles dynamically in code. You can set up custom conditions and when matched apply a style that will highlight the item.

IntegralUI Web is a suite 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.