10 Replies Latest reply on Feb 4, 2009 7:22 AM by Dongyao Zhao

    How collapse/expand the tree node by double click the node n

    Dongyao Zhao Novice

      The tree node can only collapsed/expanded by icon-collapsed/expanded and the arrow? if it can be done by click the node name(always is outputText), it is
      wonderful. Anybody hat ideas? Thanks in advice.

        • 1. Re: How collapse/expand the tree node by double click the no
          Nick Belaevski Master

          Hello,

          toggleOnClick attribute is what you need.

          • 2. Re: How collapse/expand the tree node by double click the no
            Dongyao Zhao Novice

            thank you very much. It works, only reRender a bit slowly. if many times clicked, it informs any id not found in dom tree, or is overwritten. I don't know, what is the reason. Anyway you have solved my two questions, and saved many time, thank you again.

            • 3. Re: How collapse/expand the tree node by double click the no
              Dongyao Zhao Novice

              i got the error message again:

              drop. Element with [j_id4:j_id50:porttreePaneId:j_id51:0:j_id55:0:j_id59:1::j_id60]ID was not found in the Dom tree.
              Probably element has no client ID or client ID hasn't been written. DnD's disabled. Check please.
              


              • 5. Re: How collapse/expand the tree node by double click the no
                Dongyao Zhao Novice

                Thanks for your reply:
                code snippet:

                <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:dim="http://dimetis.de/jsf"
                 xmlns:c="http://java.sun.com/jstl/core">
                
                 <rich:tree id="portTreePaneId" style="width:200px" switchType="ajax"
                 dragIndicator=":indicator" toggleOnClick="true"
                 nodeSelectListener="#{mainBean.processSelection}"
                 rendered="${ayoutBean.rightPane == 'portTree')||
                 (layoutBean.content == 'default')}">
                
                 <rich:treeNodesAdaptor nodes="#{mainBean.hostNodes}" var="host" id="HostNodeId">
                 <rich:treeNode icon="#{host.icon}" >
                 #{host.label}
                 <a4j:support event="onselected" reRender="settingsPaneWrapper" />
                 </rich:treeNode>
                
                 <rich:treeNodesAdaptor nodes="#{host.categories}" var="category" id="InOutNodeId">
                 <rich:treeNode icon="#{category.icon}" ajaxSingle="true" title="#{category.label}">
                 #{category.label}
                 <a4j:support event="onselected" reRender="settingsPaneWrapper"/>
                 </rich:treeNode>
                
                 <rich:treeNodesAdaptor nodes="#{category.children}" var="child" id="PortNodeId">
                 <rich:treeNode icon="#{child.icon}" iconLeaf="#{child.icon}" title="#{child.portStatus}"
                 dragType="#{category.label}" dragValue="#{child}" ajaxSingle="true"
                 ondragend="twp = '#{category.label}'; setDraggedTypeFromPortTree();"
                 reRender="taskWizardContinuous, taskWizardEvent,taskWizardSingle,taskWizardMonitor">
                 <a4j:support event="onselected" reRender="settingsPaneWrapper,analyzerPaneWrapper"/>
                 <rich:dropSupport acceptedTypes="#{child.acceptedTypes}" requestDelay="3"
                 reRender="monitortaskOutData, CreaterecordingTaskfromTree, retrievalOutTypeId,taskWizardMonitor"
                 ondrop="startWait();"
                 ondropend="type = '#{child.portType}';"
                 dropValue="#{child}"
                 oncomplete="if (twp == 'IN')
                 {
                 initCreateMonitorFromTreeObject();
                 if (type != 'ASI')
                 {
                 var tmp = getObjectElement(createMonitorFromTreeIpAddressId);
                 if (tmp.onfocus != null)
                 tmp.focus();
                 } else
                 getObjectElement(createMonitorFromTreenoAsiPortId).value=#{child.id};
                 openTaskWizard();
                 }
                 else if(twp == 'fromTable')
                 {
                 Richfaces.showModalPanel('CreaterecordingTaskfromTree');
                 }
                 stopWait();"
                 dropListener="#{ddTaskBean.processDropOnPort}"/>
                
                 <rich:dndParam name="label" type="drag" value="#{child.label}"/>
                 <h:outputText value="#{child.label}" />
                 </rich:treeNode>
                
                 <rich:treeNodesAdaptor nodes="#{child.children}" var="type" id="TaskNodeId">
                 <rich:treeNode icon="#{type.icon}" iconLeaf="#{type.icon}" dragType="category"
                 dragValue="#{child.id}"
                 ondragend="twp = '#{type.label}';" reRender="settingsPaneWrapper">
                 <a4j:actionparam value="#{child.id}" name="portId"/>
                 <a4j:support event="onselected" reRender="settingsPaneWrapper"/>
                 <h:outputText value="#{type.label}"/>
                 <rich:dndParam name="label" type="drag" value="#{type.label}"/>
                 </rich:treeNode>
                
                 <rich:treeNodesAdaptor nodes="#{type.children}" var="interval" id="OutputNodeId">
                 <rich:treeNode iconLeaf="#{interval.icon}" dragType="table"
                 ondragend="twp='fromTable'; setDraggTypeFromIntervalTree();">
                 #{interval.label}
                 <a4j:actionparam value="#{interval.recordedInterval.id}" name="draggedTaskId"/>
                 <rich:dndParam name="label" value="#{interval.recordedInterval.id}" />
                 </rich:treeNode>
                 </rich:treeNodesAdaptor>
                 </rich:treeNodesAdaptor>
                 </rich:treeNodesAdaptor>
                 </rich:treeNodesAdaptor>
                 </rich:treeNodesAdaptor>
                 </rich:tree>
                
                 <a4j:jsFunction name="setDraggedTypeFromPortTree">
                 <a4j:actionparam name="type" value="tree" assignTo="#{ddTaskBean.draggedTaskType}" />
                 </a4j:jsFunction>
                
                 <a4j:jsFunction name="setDraggTypeFromIntervalTree">
                 <a4j:actionparam name="type" value="table" assignTo="#{ddTaskBean.draggedTaskType}" />
                 </a4j:jsFunction>
                </ui:composition>
                


                • 6. Re: How collapse/expand the tree node by double click the no
                  Ilya Shaikovsky Master

                  please change the content of the node which contains dro support to:

                  <rich:treeNode icon="#{child.icon}" iconLeaf="#{child.icon}" title="#{child.portStatus}"
                   dragType="#{category.label}" dragValue="#{child}" ajaxSingle="true"
                   ondragend="twp = '#{category.label}'; setDraggedTypeFromPortTree();"
                   reRender="taskWizardContinuous, taskWizardEvent,taskWizardSingle,taskWizardMonitor">
                   <a4j:support event="onselected" reRender="settingsPaneWrapper,analyzerPaneWrapper"/>
                   <rich:dndParam name="label" type="drag" value="#{child.label}"/>
                  <a4j:outputPanel>
                   <rich:dropSupport acceptedTypes="#{child.acceptedTypes}" requestDelay="3"
                   reRender="monitortaskOutData, CreaterecordingTaskfromTree, retrievalOutTypeId,taskWizardMonitor"
                   ondrop="startWait();"
                   ondropend="type = '#{child.portType}';"
                   dropValue="#{child}"
                   oncomplete="if (twp == 'IN')
                   {
                   initCreateMonitorFromTreeObject();
                   if (type != 'ASI')
                   {
                   var tmp = getObjectElement(createMonitorFromTreeIpAddressId);
                   if (tmp.onfocus != null)
                   tmp.focus();
                   } else
                   getObjectElement(createMonitorFromTreenoAsiPortId).value=#{chi
                  ld.id};
                   openTaskWizard();
                   }
                   else if(twp == 'fromTable')
                   {
                   Richfaces.showModalPanel('CreaterecordingTaskfromTree');
                   }
                   stopWait();"
                   dropListener="#{ddTaskBean.processDropOnPort}"/>
                  
                   <h:outputText value="#{child.label}" />
                  </a4j:outputPanel>
                   </rich:treeNode>


                  b.t.w. why you using dropSupport component instead of just built in drop functionality of treeNode?

                  • 7. Re: How collapse/expand the tree node by double click the no
                    Dongyao Zhao Novice

                    I use: richfaces 3.2.0.SR1 and Tomcat 5.5, jsf 1.2 facelets. 1.1.12

                    • 8. Re: How collapse/expand the tree node by double click the no
                      Dongyao Zhao Novice

                      Thanks for your advice. I have tried with built in drop functionality of treeNode. It works. didn't get the error messages. But only very slowly by double click to collapse the node. Anyway thank you again.

                      • 9. Re: How collapse/expand the tree node by double click the no
                        Dongyao Zhao Novice

                        I get the new problem, that with the built in drop functionality of treeNode, by drop can not get the oncomplete. ondrop="startWait()" is ok, dropListener="#{ddTaskBean.processDropOnPort}" the java method is called.
                        ondropend="...." doen't run. This is the reason, why i have used the dropSupport.

                        the code use build in drop fun. of treeNode

                         <rich:treeNode icon="#{child.icon}" iconLeaf="#{child.icon}" title="#{child.portStatus}"
                         dragType="#{category.label}" dragValue="#{child}" ajaxSingle="true"
                         ondragend="twp = '#{category.label}'; setDraggedTypeFromPortTree();"
                         reRender="taskWizardContinuous, taskWizardEvent,taskWizardSingle,taskWizardMonitor,monitortaskOutData,
                         CreaterecordingTaskfromTree, retrievalOutTypeId,taskWizardMonitor"
                         acceptedTypes="#{child.acceptedTypes}"
                         ondrop="startWait();"
                         dropListener="#{ddTaskBean.processDropOnPort}"
                         ondropend="type = '#{child.portType}';alert(type);"
                         dropValue="#{child}"
                         oncomplete="alert(twp);
                         if (twp == 'IN')
                         {
                         initCreateMonitorFromTreeObject();
                         if (type != 'ASI')
                         {
                         var tmp = getObjectElement(createMonitorFromTreeIpAddressId);
                         if (tmp.onfocus != null)
                         tmp.focus();
                         } else
                         getObjectElement(createMonitorFromTreenoAsiPortId).value=#{child.id};
                         openTaskWizard();
                         }
                         else if(twp == 'fromTable')
                         {
                         Richfaces.showModalPanel('CreaterecordingTaskfromTree');
                         }
                         stopWait();"
                         />
                        


                        • 10. Re: How collapse/expand the tree node by double click the no
                          Dongyao Zhao Novice

                          because of the bug of D&D inner tree, i must use the dropsupport for the tree node. i have tried with : Ilya Shaikovsky's advice, but doesn't work. I tried to put the tree node into a4j:outputPanel, it works, but the node label shows the package's name + object.

                          
                          <rich:treeNodesAdaptor nodes="#{category.children}" var="child" >
                           <a4j:outputPanel layout="none">
                           <rich:treeNode icon="#{child.icon}" iconLeaf="#{child.icon}" title="#{child.portStatus}"
                           dragType="#{category.label}" dragValue="#{child}" ajaxSingle="true"
                           ondragend="twp = '#{category.label}'; setDraggedTypeFromPortTree();"
                           reRender="taskWizardContinuous, taskWizardEvent,taskWizardSingle,taskWizardMonitor">
                           <a4j:support event="onselected" reRender="settingsPaneWrapper,analyzerPaneWrapper"/>
                          
                           <rich:dropSupport acceptedTypes="#{child.acceptedTypes}" requestDelay="3"
                           reRender="monitortaskOutData, CreaterecordingTaskfromTree, retrievalOutTypeId,taskWizardMonitor"
                           ondrop="startWait();"
                           ondropend="type = '#{child.portType}';"
                           dropValue="#{child}"
                           oncomplete="if (twp == 'IN')
                           {
                           initCreateMonitorFromTreeObject();
                           if (type != 'ASI')
                           {
                           var tmp = getObjectElement(createMonitorFromTreeIpAddressId);
                           if (tmp.onfocus != null)
                           tmp.focus();
                           } else
                           getObjectElement(createMonitorFromTreenoAsiPortId).value=#{child.id};
                           openTaskWizard();
                           }
                           else if(twp == 'fromTable')
                           {
                           Richfaces.showModalPanel('CreaterecordingTaskfromTree');
                           }
                           stopWait();"
                           dropListener="#{ddTaskBean.processDropOnPort}"/>
                          
                           <rich:dndParam name="label" type="drag" value="#{child.label}"/>
                          
                           <h:outputText value="#{child.label}" />
                          
                           </rich:treeNode>
                           </a4j:outputPanel>