richfaces how to avoid displaying rich tree icon ? I want to filter the tree where if one father is filltered he won't be showen but his children will so i need to change from defult icon to none icon .
<rich:treeNode type="regularNode"
icon="#{item.toShow?item.icon:'null'}" rendered="#{item.toShow}">
where the item represent a treeNode
<rich:tree
and <rich:treeNode>
components finally become a bunch of table
, tr
and td
nodes in HTML
page.
By looking at the component reference document of <rich:treeNode>
you may find that the predefined style class name for the icon of <rich:treeNode>
component is rich-tree-node-icon
.
Yes, this is the style class that you should overwrite to change the style of the icon.
However in your case you don't need to hide the icons of all of the <rich:treeNode>
s. So something tricky should be done.
This is just one trick you can do.
You know you can specify the icon of the tree node by using an EL
like this. So first do it.
<rich:treeNode icon="#{myNode.nodeIcon}"
where myNode
represents a treeNode
and getNodeIcon()
method returns the path to the image. For the treeNode
s that you need their icons be hidden, this method should return an empty String.
Ok, now put this javascript
after the closing </rich:tree>
tag.
<script>
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
var iconFound = imgs[i].parentNode.getAttribute('class').indexOf('rich-tree-node-icon') >= 0;
var imgSrc = imgs[i].getAttribute('src');
if(iconFound && (imgSrc == '')) {
imgs[i].style.display = 'none';
}
}
</script>
That is it.
Note: What does this script do?
It finds <img>
s where their parent's style class contains rich-tree-node-icon
class.
Then hide those <img>
tags if the src
is empty.