voyent
CSS style for selected tree node  XML
Forum Index -> Components
Author Message
mahendersingh

Joined: 18/Jun/2007 00:00:00
Messages: 12
Offline


Hi all,

I'm using the ice Tree component

How can I change the CSS style class of the selected (clicked) tree node. I need to display it different from other nodes(color or font). This helps user to keep track where he clicked.

philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


Hi,

You could use a dynamic expression in your styleClass attribute:

Code:
...
 <ice:treeNode>
                 <f:facet name="icon">
                     <ice:panelGroup style="display: inline" styleClass="#{ item.userObject.selected ? 'selectedClass' : 'unselectedClass' }">
                         <ice:graphicImage
                                 value="#{item.userObject.icon}"/>
                         <ice:commandLink
                                 actionListener="#{item.userObject.nodeClicked}">
                             <ice:outputText
                                     value="#{item.userObject.text}"/>
                         </ice:commandLink>
                     </ice:panelGroup>
                 </f:facet>
                 <f:facet name="content">
                     <ice:panelGroup style="display: inline"  style="display: inline" styleClass="#{ item.userObject.selected ? 'selectedClass' : 'unselectedClass' }">
                         <ice:outputText value="#{msgs['components.tree.node.outputText.label']}"
                                         style="font-style: italic"
                                         rendered="#{item.userObject.componentType == 1}"/>
                         <ice:inputText
                                 rendered="#{item.userObject.componentType == 2}"/>
                         <ice:commandButton
                                 value="#{msgs['components.tree.node.outputText.label']}"
                                 rendered="#{item.userObject.componentType == 3}"/>                    
                     </ice:panelGroup>
                 </f:facet>
             </ice:treeNode>
 


You just need to keep a 'selected' boolean property in your user object and manage that accordingly.

Hope this helps.
Philip

.
mahendersingh

Joined: 18/Jun/2007 00:00:00
Messages: 12
Offline


Thnx philip,

I have created a selected variable in userObject and was able to change the styleclass. The problem is tree needs to be updated so that changes render. If i update the tree the whole tree collapse and user needs to navigate to the particular node again. Is there anyway so that the previous state of the tree is rendered with new changes.
mahendersingh

Joined: 18/Jun/2007 00:00:00
Messages: 12
Offline


Hi Philip,

Could you please attach the backing bean code for dynamic selection of style class.
keefer

Joined: 24/May/2007 00:00:00
Messages: 17
Offline


mahendersingh,

Did you ever work the backing bean out? I would be interested in seeing this.

Thanks,
--keefer
 
Forum Index -> Components
Go to:   
Powered by JForum 2.1.7ice © JForum Team