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.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at

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.

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.

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:

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.


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.

The TreeView component is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or any other JavaScript framework.