Custom Images for each Tree Node

This page demonstrates how to customize the images of each individual node.

Normally images are associated with nodes based on type, or whether they have children. This is done using the standard tree:nodeMatch tags.

If you need to customize the image of each node (in both expanded and collapsed state), you call the ITreeNode.setExpandedImageUrl(String) and ITreeNode.setCollapsedImageUrl(String) methods. Note: for nodes that cannot be expanded, only the setCollapsedImageUrl(String) method call is necessary.

To display the image url of a node use the tree:nodeImageUrl tag. This tag will automatically choose either the expanded or collapsed image url depending on the state of the node.

While all nodes in this example have custom image urls set, only the Lion King node has a different image than the other nodes.

Cartoons
Lion King
Snow White
Comedies
Fantasy
Thrillers
Selected Node Detail:

Id
Name
Type