TreeView with Custom Item Template

In general, items in TreeView component display icon and label set in your code. However, in some case you may need to have a tree where items have different kind of content. For this purpose, you can create custom item templates, where each item can show custom HTML elements arranged in different layouts. You can have the same template shared among all tree nodes or create conditions and different templates for each item separately.

There is a sample code below written in JavaScript, Angular, React and Vue that shows how to create custom template for tree view items.

In this example, tree nodes display the project name, current completion represented by a custom progress bar and the project status. In addition, the progress of projects that are parent of other projects is calculated using aggregation function based on progression from sub projects.

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

How to Create Custom Node Template in TreeView

The IntegralUI TreeView components has a special property named itemTemplate, which can accept custom function set in your code where you can create a layout of custom HTML elements and return it from the function. Then TreeView using this template will add the content to each tree item.

The item template function must return a value in HTML format using html object from Lit Element.

• JavaScript
• Angular
• React
• Vue

In addition, depending on the current stage of the project, the progression is displayed in different color. You can modify the progress bar from code using this function as an example:

• JavaScript
• Angular
• React
• Vue

How to Update Progression in Parent Nodes

The current completion of projects in parent nodes is dynamic, depending on progression of sub projects. To update progression of parent nodes, you can use an aggregation function that you can call on demand. This function is recursive, which will cycles through all sub projects deep within the tree hierarchy and updates all parents depending on progression value from child projects.

• JavaScript
• Angular
• React
• Vue

Conclusion

IntegralUI TreeView comes with built-in support for custom item templates. To create a template you can use standard or custom HTML elements and arrange them in different layouts. You can have one template shared among all nodes (parent and child), or you can set custom conditions with the template function and have a different template for each node separately.

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.