6 Replies Latest reply: Apr 20, 2010 11:05 AM by Nick Belaevski RSS

Tree: Multiple select and select children

Craig Bensemann Novice

Hi,

 

I know similar questions have been asked before but after reading over the forums I think I've become more confused than ever. Over the past year or so I have used nearly all the Richfaces components and I've found the tree component and its adaptors to be the most confusing to get my head round. Currently I have used the folowing to successfully iterate over a POJO tree structure.

 

{code:xml}<rich:tree id="allPPETree" ajaxChildActivationEncodeBehavior="none" switchType="client"
                ajaxNodeSelectionEncodeBehavior="none" ajaxKeys="#{null}"
                nodeSelectListener="#{ppeController.processSelection}" ajaxSubmitSelection="true" reRender="allPPETree">
                <rich:recursiveTreeNodesAdaptor roots="#{ppeRoot}" nodes="#{ppeCategory.subCategories}" var="ppeCategory">
                    <rich:treeNodesAdaptor nodes="#{ppeCategory.equipment}" var="ppe">
                        <rich:treeNode>
                            <h:outputText id="leafLabel" value="#{ppe.name}" />
                        </rich:treeNode>
                    </rich:treeNodesAdaptor>
                    <rich:treeNode id="nodeNode" icon="/a4j/g/3_3_3.CR1images/iconFolder.gif"
                        iconLeaf="/a4j/g/3_3_3.CR1images/iconFolder.gif">
                        <h:outputText id="nodeLabel" value="#{ppeCategory.name}" />
                    </rich:treeNode>
                </rich:recursiveTreeNodesAdaptor>
            </rich:tree>{code}

 

What I want to do is allow multiple selections of nodes/leaves (I did not plan on using checkboxes as in other posts but could if I need to). I would also like to highlight/select (visually at least) all children of the selected node.

 

I have attempted to implement a TreeStateAdvisor which is successfully called and returns true or false for the correct nodes however only the last node is visually selected.

 

Any help or pointers in the right direction would be greatly appreciated.

 

 

Thanks

Craig

  • 1. Re: Tree: Multiple select and select children
    Nick Belaevski Master

    Hi Craig,

     

    Multiple selection in tree is not supported out of the box.

  • 2. Re: Tree: Multiple select and select children
    Craig Bensemann Novice

    Hi Nick,

     

    Thanks for you reply. I didn't think it would be that simple Any tips for how I could go about making this happen somehow? Anything I can look at extending? I have a number of data structures which would be best displayed as a tree to let users pick the parts they need so I think this is going to be a requirement for my application in one form or another.

     

    thanks again

    Craig

  • 3. Re: Tree: Multiple select and select children
    Nick Belaevski Master

    You can switch built-in selection completely off and implement your own on top of tree. This can include either checkboxes (the simplest way I think) or more complex solution involving custom script for tree DOM elements. You can start with checkboxes wired to map and keyed by rowKey (this will be kind of visual model) and proceed with implementation of required functionality, e.g. highlighting subtree, etc.

  • 4. Re: Tree: Multiple select and select children
    Craig Bensemann Novice

    Hi Nick,

     

    I have a working solution for this now. Basically I define my tree as below:

     

    <rich:tree id="allPPETree"  ajaxChildActivationEncodeBehavior="none" switchType="ajax"
             ajaxNodeSelectionEncodeBehavior="none" ajaxKeys="#{null}"                                   ajaxSubmitSelection="true"  reRender="allPPETree">
         <rich:recursiveTreeNodesAdaptor roots="#{ppeRoot}"
                 nodes="#{ppeCategory.subCategories}"  var="ppeCategory">

            <rich:treeNodesAdaptor  nodes="#{ppeCategory.equipment}" var="ppe">
                 <rich:treeNode nodeClass="#{multiSelectTreeState.isSelected(ppe)  ?
                         'tree-node-selected' : ''}"
    >

                     <a4j:support event="onselected"
                         action="#{ppeController.processSelection(ppe)}"
                         reRender="allPPETree"  />

                    <h:outputText  id="leafLabel" value="#{ppe.name}" />
                 </rich:treeNode>
             </rich:treeNodesAdaptor>
            <rich:treeNode  id="nodeNode" icon="/a4j/g/3_3_3.CR1images/iconFolder.gif"
                 iconLeaf="/a4j/g/3_3_3.CR1images/iconFolder.gif"
                 nodeClass="#{multiSelectTreeState.isSelected(ppeCategory) ?
                         'tree-node-selected'  : ''}"
    >

                <h:outputText  id="nodeLabel" value="#{ppeCategory.name}" />
                 <a4j:support event="onselected"
                         action="#{ppeController.processSelection(ppeCategory)}"
                         reRender="allPPETree"  />

            </rich:treeNode>
         </rich:recursiveTreeNodesAdaptor>
    </rich:tree>

     

    I then have a bean record the state of the current node (basically just a hashmap as you suggested) and manage the selection myself. I use a4j:support as I need the event to fire every time the user clicks (to toggle the selection) and not just the first time a node is clicked as in nodeSelectListener.

     

    I have tried to fully describe the solution on my seam tips site https://sites.google.com/a/softwarefactory.co.nz/seam-tips/richfaces-related/rich-tree-multiple-selection

     

    Please feel free to comment on my solution as improvements are always welcome.

     

    Thanks for your help

    Craig

  • 5. Re: Tree: Multiple select and select children
    Ilya Shaikovsky Master

    Thanks for your efforts and update! we will look into your post for sure b.t.w. feel free to create articles in our wiki knowledgebase.. such real world cases with at least short descriptions would be superb contribution to the project!

  • 6. Re: Tree: Multiple select and select children
    Nick Belaevski Master

    Craig,

     

    Thanks for the article, all seems fine, however I'd like to suggest removing the following attributes:

     

    - ajaxKeys="#{null}" this was added in demo because there were no *EncodeBehavior attributes then. Now it's not necessary.

    - ajaxSubmitSelection="true". There are a4j:support components that deal with selection already, no need to init request from the tree component itself.