Thursday, January 24, 2013

How to change icon for Primefaces tree

This post shows how to change the default icon for Primefaces tree.

From the Primefaces demo, we can see that there are attributes for us to change the opened and closed icon - expandedIcon, collapsedIcon, and also icon.
icon for Primefaces tree

These attributes are not referring to image files. Instead, there are css classes.
Thus, we have to define css classes to overwrite the existing.


Steps:
1. declare below css classes in the application css file.
Change icon for Primefaces tree - styleClass
    i.  #{resource[....]} refers to the application resource folder.
    ii. ['images:...'] refers to the images folder in resource
    iii.[...:folder_opened.png] refers to the image file name.

2. use the newly declared css classes in <p:tree />
How to change icon for Primefaces tree

Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...