Tree and modal panel
I've tried to simulate some folder/file tree. I wanted to allow simple operations upon right click (new subfolder, rename, delete). For the new subfolder and rename operations, I display some modalPanel with a simple inputtext and ok/cancel buttons.
All works fine, but a nice to have feature would be to set the selected item name in the modal panel input text upon the rename operation. However, I don't know how to do that.
Here's the code I have currently :
<h:form>
<a4j:outputPanel id="foldersOutput" ajaxRendered="true">
<rich:tree switchType="ajax" value="#{documentHandler.treeRoot}" var="item" nodeFace="#{item.type.toString}" reRender="foldersOutput" nodeSelectListener="#{documentHandler.onSelectNode}">
<rich:treeNode type="FOLDER" icon="/images/tree_folder.gif" iconLeaf="/images/tree_folder.gif">
<h:outputText value="#{item.name}"/>
<rich:contextMenu event="oncontextmenu" attached="true" submitMode="ajax">
<rich:menuItem value="New subfolder" onclick="javascript:Richfaces.showModalPanel('newSubFolderPanel');">
<a4j:actionparam name="contextMenuFolderId" value="#{item.id}" assignTo="#{documentHandler.contextMenuFolder}"/>
</rich:menuItem>
<rich:menuItem value="Rename" onclick="showRenameFolderPanel('');">
<a4j:actionparam name="contextMenuFolderId" value="#{item.id}" assignTo="#{documentHandler.contextMenuFolder}"/>
</rich:menuItem>
<rich:menuItem value="Delete" actionListener="#{documentHandler.doDeleteFolder}" rendered="#{item.subFolders.size == 0 and item.documents.size == 0}" onclick="if(!window.confirm('Are you sure?')) {return false;}">
<a4j:actionparam name="contextMenuFolderId" value="#{item.id}" assignTo="#{documentHandler.contextMenuFolder}"/>
</rich:menuItem>
</rich:contextMenu>
</rich:treeNode>
<rich:treeNode type="DOCUMENT" iconLeaf="/images/drafts.gif">
<h:outputText value="#{item.name}"/>
</rich:treeNode>
</rich:tree>
</a4j:outputPanel>
<a4j:jsFunction name="showRenameFolderPanel" oncomplete="javascript:Richfaces.showModalPanel('renameFolderPanel');">
<a4j:actionparam name="param1" assignTo="#{documentHandler.renameFolderName}" />
</a4j:jsFunction>
</h:form>
<rich:modalPanel id="newSubFolderPanel" width="400" height="100" resizeable="false" zindex="2000">
<f:facet name="header">
<h:outputText value="New subfolder" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/error.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('newSubFolderPanel')" />
</f:facet>
<h:form onsubmit="Richfaces.hideModalPanel('renameFolderPanel');">
<h:panelGrid>
<h:inputText value="#{documentHandler.newSubFolderName}" size="50" maxlength="65" required="true">
<f:validateLength maximum="65"/>
</h:inputText>
<h:panelGroup>
<h:commandButton value="Submit" actionListener="#{documentHandler.doNewSubFolder}"/>
<h:commandButton value="Cancel" immediate="true" onclick="Richfaces.hideModalPanel('newSubFolderPanel')"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
</rich:modalPanel>
<rich:modalPanel id="renameFolderPanel" width="400" height="100" resizeable="false" zindex="2000">
<f:facet name="header">
<h:outputText value="Rename folder" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/error.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('renameFolderPanel');" />
</f:facet>
<h:form onsubmit="Richfaces.hideModalPanel('renameFolderPanel');">
<h:panelGrid>
<h:inputText value="#{documentHandler.renameFolderName}" size="50" maxlength="65" required="true">
<f:validateLength maximum="65"/>
</h:inputText>
<h:panelGroup>
<h:commandButton value="Submit" actionListener="#{documentHandler.doRenameFolder}"/>
<h:commandButton value="Cancel" immediate="true" onclick="Richfaces.hideModalPanel('renameFolderPanel');"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
</rich:modalPanel>
As you can see, I tried to use a a4j:jsFunction for the rename operation, whereas I used the same code as the new subfolder operation at first.
With some nodeselectListener, it wouldn't work, the listener being called just after the modal panel is shown.
With the jfFunction solution, I tried puttnig onclick="showRenameFolderPanel('#{item.name}');" there but it only worked with the very first item name (which I can understand).
So the problem summarizes to passing some parameter to some modal panel, obtained from some tree item property.
I've checked a lot these forums with no satisfying solution. Can anyone please help me ?