Drag-And-Drop and rich:tree

[pschuett]

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

[codo]

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!

[ilya_shaikovsky]

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

[codo]

Thank you Ilya, it looks better now!

[pschuett]

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.

Thanks for any hint.

Ciao

  Peter Schütt

[codo]

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

[pschuett]

Hallo,

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

Ciao

   Peter Schütt