Search code examples
javajsfrichfaces

richfaces how to avoid displaying rich tree icon?


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


Solution

  • <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 treeNodes 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 &lt; imgs.length; i++) {
            var iconFound = imgs[i].parentNode.getAttribute('class').indexOf('rich-tree-node-icon') >= 0;
            var imgSrc = imgs[i].getAttribute('src');
            if(iconFound &amp;&amp; (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.