Bringing dataTable selection data in modalPanel back to parent form

[janpk]

Hi,

I'm new to richfaces and have been trying to get a simple sample code running involving dataTable and modalPanel. I would have expected to find some examples of a usecase like this, but I just don't seem to be able to construct something that mr Google can use to give me information. I always get a ton of hits on opening a modalPanel showing details from at dataTable.

What I'm trying to achieve is from a page, press a link to popup a modalPanel. In the modalPanel I would like to perform a "search" to display a list of some data in a dataTable. Then I would like to select one of the rows and have data associated with the selected row propagated back into the original page.

I have successfully created an example where I use an input field in the modalPanel and gets the value entered there to be updated in the original page. Now I have expanded on the example and I am able to display the modalPanel, perform search and display the results in a data table. But I'm not able to figure out how to update the original page with values from the selected row. Anybody have any pointer to where I should look to find a solution to this ?

Here's the xhtml I use for this

<h:form>
 <h:panelGrid id="input">
  <h:outputLabel value="Code: " /> <h:inputText value="#{PostalCode.postCode}" />
   <a4j:keepAlive beanName="PostalCode" />
   <a4j:commandButton id="link2" 
     value="..." oncomplete="#{rich:component('modalPanel')}.show()"
     reRender="input">
   </a4j:commandButton>
  </h:panelGrid>
</h:form>
<rich:modalPanel id="modalPanel" width="350" height="500">
 <f:facet name="header">
 Modal Panel
 </f:facet>
 <f:facet name="controls">
  <h:graphicImage value="/global/images/close.png"
    style="cursor:pointer"
     onclick="#{rich:component('modalPanel')}.hide()" />
 </f:facet>
 <a4j:region id="postFinder" renderRegionOnly="true">
  <h:form>
   <a4j:commandButton styleClass="button" id="postSearch"
      onclick="this.disabled=true;" oncomplete="this.disabled=false;"
      action="#{PostalCodeBean.doSearch}" value="Search"
      reRender="postFinderSearchResults,postSearch" />
   <a4j:status>
   <f:facet name="start">
    <h:graphicImage value="/global/images/spinner.gif" />
   </f:facet>
   </a4j:status>
  </h:form>
  <rich:dataTable id="postFinderSearchResults" value="#{PostalCodeBean.postalCodes}" var="postalCode" >
  <h:column>
   <a4j:commandLink value="#{postalCode.postCode}" reRender="input">
    <a4j:actionparam name="paramName" value="#{postalCode.postCode}" assignTo="#{PostalCode.postCode}" />
   </a4j:commandLink>
  </h:column>
  <h:column>
   <h:outputText id="postName" value="#{postalCode.postName}" />
  </h:column>
 </rich:dataTable>
 </a4j:region>
</rich:modalPanel>

Regards,

Jan-Petter

[nbelaevski]

Hi Jan-Petter,

After link is clicked, data about selected row should be assigned to #{PostalCode.postCode} bean property. I see you've already specified "reRender" attribute, so it should point to IDs of components you wish to update. And if you link these components to #{PostalCode.postCode}, it should show selected post code.

Two things to consider:

1) This line:

<a4j:region id="postFinder" renderRegionOnly="true">

limits updates to the components nested inside region, nothing outside of it will be updated. Even if specified explicitly in "reRender".

2) a4j:actionparam can be replaced with f:setPropertyActionListener. The difference is that a4j:actionparam encodes data to the client, and then passes it back in request parameter, so for complex data object (e.g. that are not String or Integer), and f:setPropertyActionListener operates on the server.

[ilya_shaikovsky]

not exactly the case you need But main idea is the same.

http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable&cid=383120

[janpk]

This is one of the samples I've been looking at, trying to get it to work "the other way around". But without success so far.

Jan-Petter

[janpk]

So, I've remove the a4J:region tag. It was there because at som epoint I had a problem with the modal dialog just closing on me when I clicked the search button. Somwhere along trying to figure that problem out, I added the region part and I became convinced that this kept the modal panel from closing. After removing it , the modal panel is still around after pressing the search button so there must be some other changed that I made that did the trick.

Now,  I've changed the modalPanel code to

<rich:modalPanel id="modalPanel" width="350" height="500">
  <f:facet name="header">
   Modal Panel
   </f:facet>
  <f:facet name="controls">
   <h:graphicImage value="/global/images/close.png"
    style="cursor:pointer"
    onclick="#{rich:component('modalPanel')}.hide()" />
  </f:facet>
   <h:form>
    <a4j:commandButton styleClass="button" id="postSearch"
     onclick="this.disabled=true;" oncomplete="this.disabled=false;"
     action="#{PostalCodeBean.doSearch}" value="Search"
     reRender="postFinderSearchResults,postSearch" />
    <a4j:commandLink value="Clickme" reRender="input">
     <a4j:actionparam name="paramName" value="Test" assignTo="#{PostalCode.postCode}" />
    </a4j:commandLink>
    <rich:dataTable id="postFinderSearchResults" value="#{PostalCodeBean.postalCodes}" var="postalCode" >
     <h:column>
      <a4j:commandLink value="#{postalCode.postCode}" reRender="input">
       <a4j:actionparam name="paramName" value="TEST" assignTo="#{PostalCode.postCode}" />
      </a4j:commandLink>
     </h:column>
     <h:column>
      <h:outputText id="postName" value="#{postalCode.postName}" />
     </h:column>
    </rich:dataTable>
   </h:form>

</rich:modalPanel>

For testing I've added a a4j:commandLink in the modalPanel outside the rich:dataTable , just to test if I'm able to update the parent form, and I am. Clicking the link updates the parent table. The next I tried was to hardcode the value in the a4j:commandLink used in the rich:dataTable for test, since I know that it works outside the rich:dataTable, but that one still is unable to update the parent table.

To conclude , the a4j:commandLink outside the rich:dataTable works, the one inside the rich:dataTable does not and I can't figure out why.

Jan-Petter

[ilya_shaikovsky]

please provide simple war sample (with java sources) in order to just importa and investigate. And we'll try to resolve then asap

[janpk]

Great !

I've stripped down the original war project and exported the eclipse project to the war file attached. I've also attached a zip file with the project as a maven project if thats easier for you to work with.

Jan-Petter ::_Q