Even Odd Items in TreeView Component

The IntegralUI TreeView component has a set of CSS classes that govern the overall appearance of the tree view and its content. You can use CSS to modify the background color of items in general or separately. In addition, you can also use dynamic styles that you can apply to each item separately during run-time from code. This allows you to set up conditions when and how item(s) will appear in the tree view. In this article, you will learn how to show tree view items in alternate colors, where even and odd items have a different background color.

There is a sample code below written in JavaScript, Angular, React and Vue that shows how to use alternate background colors for tree view items.

As demo shows, items appear in alternate colors based on their position in the tree hierarchy. Odd items appear in light gray background, while the even items appear in dark gray background.

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

How to Show Tree Items in Alternate Colors

Although you can set up items to appear in different colors using CSS selectors by modifying existing CSS classes, this change is mostly static. To change the appearance of tree view items, you can use styles.

You can apply a different style to each item state: disabled, normal, hovered or selected.

Related: How to Highlight Nodes in TreeView

Alternate colors can increase readability of the TreeView content, and because their order will change based on different actions like: add/remove, expand/collapse, drag and drop or other its best to apply styles when tree view layout updates. For this purpose, you can handle updateComplete event, which fires whenever tree view layout changes.

• JavaScript
• Angular
• React
• Vue

In this code, at first a linear list of all tree items is retrieved. This allows to determine the order of the item in the tree hierarchy, is it even or odd item. By cycling through all items in this list, based on their index, a different style is applied to the style field of each item.

In this case, the items with even index have dark gray background, while the items with odd index have light gray background. In addition, if item is selected, their text will appear in bold.

The style field accepts an object that contains settings for each item state: disabled, normal, hovered or selected.

item.style = {
    disabled: {},
    hovered: {},
    normal: {},
    selected: {}
}
                    

You can add any CSS attribute to item styles. Once applied through the item style field, these settings will override default appearance set from CSS classes.

Conclusion

Showing items in alternate colors in IntegralUI TreeView component can help to increase its readability, especially useful during scrolling. To show even/odd items in different colors you can use either CSS classes or dynamic styles, which are applied during runtime based on some condition. You can have a different style for each item separately, in default state or based on whether they are disabled, hovered or selected.

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.