6 Replies Latest reply on May 18, 2010 3:53 AM by Jan-Petter Kruger

    Bringing dataTable selection data in modalPanel back to parent form

    Jan-Petter Kruger Newbie
      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

        • 1. Re: Bringing dataTable selection data in modalPanel back to parent form
          Nick Belaevski Master

          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.

          • 3. Re: Bringing dataTable selection data in modalPanel back to parent form
            Jan-Petter Kruger Newbie

            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

            • 4. Re: Bringing dataTable selection data in modalPanel back to parent form
              Jan-Petter Kruger Newbie

              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

              • 5. Re: Bringing dataTable selection data in modalPanel back to parent form
                Ilya Shaikovsky Master

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

                • 6. Re: Bringing dataTable selection data in modalPanel back to parent form
                  Jan-Petter Kruger Newbie

                  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