6 Replies Latest reply on Mar 21, 2011 12:02 PM by Peter Schütt

    Drag-And-Drop and rich:tree

    Peter Schütt Newbie

      Hallo,

      I migrate from Richfaces 3.3.x to Richfaces 4.x and I have problems to implement Drag-And-Drop for rich:tree.

      I uses 4.0 20101226

       

      I try to variants:

       

        <rich:tree style="width:300px"

                                 toggleType="client"

                                 value="#{rolesBean.groupUserTree.rootNode.treeNode}" var="item" id="groupUserTree"

                                 nodeFace="#{treeNode.parent.parent == null ? 'node' : 'leaf'}">

                          <rich:treeNode type="node" dragType="groupUser">

                              <rich:dragSource type="drag" dragValue="#{item.externalId}"/>

                              <h:outputText value="#{item}"/>

                          </rich:treeNode>

                          <rich:treeNode type="leaf" dragType="groupUser">

                              <rich:dragSource  type="drag" dragValue="#{item.externalId}"/>

                              <h:outputText value="#{item}"/>

                          </rich:treeNode>

                      </rich:tree>

       

      or with a4j:outputPanel

       

        <rich:tree style="width:300px"

                                 toggleType="client"

                                 value="#{rolesBean.groupUserTree.rootNode.treeNode}" var="item" id="groupUserTree"

                                 nodeFace="#{treeNode.parent.parent == null ? 'node' : 'leaf'}">

                          <rich:treeNode type="node" dragType="groupUser">

                              <a4j:outputPanel>

                              <rich:dragSource type="drag" dragValue="#{item.externalId}"/>

                              <h:outputText value="#{item}"/>

                                  </a4j:outputPanel>

                          </rich:treeNode>

                          <rich:treeNode type="leaf" dragType="groupUser">

                              <a4j:outputPanel>

                              <rich:dragSource  type="drag" dragValue="#{item.externalId}"/>

                              <h:outputText value="#{item}"/>

                                  </a4j:outputPanel>

                          </rich:treeNode>

                      </rich:tree>

       

      but I only can mark the text of the node with my mouse. Drag-And-Drop does not work.

      "item" is of type javax.swing.TreeNode

       

      I cannot find an example for Drag-And-Drop with rich:tree for Richfaces 4.

      Perhaps someone can give me an example.

       

      Thanks for help.

       

      Ciao

        Peter Schütt

        • 1. Drag-And-Drop and rich:tree
          codo Newbie

          Hello Peter!

           

          Did you solve your problem? I'm trying to implement drag-n-drop in richfaces tree too (using richfaces 4 Milestone 6). I have this code, which works just fine:

                             <rich:tree value="#{myBean.treeRoot}" var="item" id="treeMain" nodeType="#{item.type}"

                                         selectionType="ajax"

                                         selectionChangeListener="#{myBean.processitemSelection}">

           

                                  <rich:treeNode type="picture">

                                      <rich:panel>

                                          <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default">

                                              <h:outputText value="#{item.data.name}" />

                                          </rich:dragIndicator>

                                          <rich:dragSource type="picture" dragIndicator="ind"

                                                           dragValue="#{item}" />

                                          <rich:dropTarget acceptedTypes="picture" dropValue="#{item}"

                                                           dropListener="#{pictureDragDrop.processDrop}"

                                                           render="treeMain" />

                                          <h:outputText value="#{item.data.name}"/>

                                      </rich:panel>

                                  </rich:treeNode>

                              </rich:tree>

           

          It actually works when I put <rich:panel> in rich:treeNode tag. When I remove rich:panel tag it is kind of buggy. I don't know if this is the right way to implement drag-and-drop in tree.

           

          Greetings!

           

           

           

           

           

           

           

           

           

           

           

           

           

          • 2. Drag-And-Drop and rich:tree
            Ilya Shaikovsky Master

            if you need some non-visual wrapper - could use a4j:outputPanel(use layout attribute to set span or div based) instead of rich:panel

            1 of 1 people found this helpful
            • 3. Drag-And-Drop and rich:tree
              codo Newbie

              Thank you Ilya, it looks better now!

              • 4. Drag-And-Drop and rich:tree
                Peter Schütt Newbie

                Hallo,

                I found a solution but there is still a problem.

                 

                I had nodeFace instead of nodeType which is wrong and I had the wrong type in rich:dragSource.

                 

                My working solution:

                 

                               <rich:tree style="height:400px;overflow:auto"

                                           toggleType="ajax" selectionType="ajax" selectionChangeListener="#{rolesBean.selectionChanged}"

                                           value="#{rolesBean.groupUserTree.rootNode.children}" var="item" id="groupUserTree"

                                           nodeType="#{item.parent.parent == null ? 'node' : 'leaf'}" render="groupUserSelection">

                                    <rich:treeNode type="node">

                                        <h:outputText value="#{item}"/>

                                        <rich:dragSource  type="groupUser" dragValue="#{item.userObject.externalId}"/>

                                    </rich:treeNode>

                                    <rich:treeNode type="leaf">

                                        <h:outputText value="#{item}"/>

                                        <rich:dragSource  type="groupUser" dragValue="#{item.userObject.externalId}"/>

                                    </rich:treeNode>

                                </rich:tree>

                ....

                <rich:column sortable="false" label="#{roles.assigned}" id="roleAssignedColumn">

                                    <f:facet name="header">

                                        <h:outputText value="#{roles.assigned}" />

                                    </f:facet>

                                    <rich:dropTarget acceptedTypes="userGroup,groupUser" dropValue="#{role.name}"

                                                     dropListener="#{rolesBean.dropListener}" render="rolesTable,roleMenu,userEntitiesPanel,treesPanel">

                                    </rich:dropTarget>

                                    <a4j:commandLink  render="rolesTable,userEntitiesTable,roleMenu,userEntitiesPanel">

                                        <a4j:param name="showDetails" assignTo="#{role.showEntities}"

                                                   value="#{!role.showEntities}"/>

                                        <h:outputText value="#{role.userEntitySize} #{roles.entities}">

                                        </h:outputText>

                                    </a4j:commandLink>

                 

                This works but there is still a problem. When I drag a node (or a leaf) of the tree to the drop target then the node symbol does not disappear.

                This looks very funny but is not expected.

                pic.jpeg

                Thanks for any hint.

                 

                Ciao

                  Peter Schütt

                1 of 1 people found this helpful
                • 5. Drag-And-Drop and rich:tree
                  codo Newbie

                  Hello Peter

                  I had the same problem. The solution for me was to put rich:dragSource in a4j:outputPanel:

                   

                                     <rich:tree value="#{myBean.treeRoot}" var="item" id="treeMain" nodeType="#{item.type}"

                                                 selectionType="ajax"

                                                 selectionChangeListener="#{myBean.processitemSelection}">

                   

                                          <rich:treeNode type="picture">

                                              <a4j:outputPanel>

                                                  <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default">

                                                      <h:outputText value="#{item.data.name}" />

                                                  </rich:dragIndicator>

                                                  <rich:dragSource type="picture" dragIndicator="ind"

                                                                   dragValue="#{item}" />

                                                  <rich:dropTarget acceptedTypes="picture" dropValue="#{item}"

                                                                   dropListener="#{pictureDragDrop.processDrop}"

                                                                   render="treeMain" />

                                                  <h:outputText value="#{item.data.name}"/>

                                              </a4j:outputPanel>

                                          </rich:treeNode>

                                      </rich:tree>

                   

                  In this way you'll can move only the label of the node (without the icon).

                   

                  Greetings

                  • 6. Drag-And-Drop and rich:tree
                    Peter Schütt Newbie

                    Hallo,

                    thanks this works. I think it should be fixed before Richfaces 4 is released but for me it works.

                     

                    Ciao

                       Peter Schütt