3 Replies Latest reply on Dec 30, 2010 3:20 AM by david-brighton

    Extended Data Table selection within a modal panel

    david-brighton

      I am using Richfaces 3.3.3 with mojarra 1.2 JSF running Java 1.6

       

      I have a modal panel with an extended data table inside however when I select an entry in the table the selection is not getting set in the backing bean, the backing bean is set with session scope.

       

      Any help would be greatly appreciated.

       

      The calling tag is :

                                   <a:commandButton value="Search"   onclick="Richfaces.showModalPanel('countrySearch', {height:'300px', width:'300px'});"
                                                                        reRender="customerDetailPanel">
                                          <a:actionparam name="option" value="OPERATE" assignTo="#{customerBean.countryOption}" />
                                      </a:commandButton>

       

      The modal panel code:

       

           <%-- COUNTRY SEARCH --%>
               <h:form>
                   <r:modalPanel id="countrySearch" >
                       <f:facet name="header">
                               <h:outputText value="Country Search"/>
                       </f:facet>
                   
                          <r:extendedDataTable id="countryTable"
                                                   height="200px"
                                                   width="100%"
                                                     value="#{customerBean.countryDataModel}"
                                                     var="country"
                                                     selectionMode="single"
                                                     selection="#{customerBean.countrySearchSelection}">
              
                                                <r:column sortBy="#{country.isoCode}"  sortable="true" >
                                                    <f:facet name="header">
                                                        <h:outputText value="ISO Code" />
                                                    </f:facet>
                                                    <h:outputText value="#{country.isoCode}" />
                                                </r:column>
                                               
                                                <r:column sortBy="#{country.name}"  sortable="true" >
                                                    <f:facet name="header">
                                                        <h:outputText value="Country Name" />
                                                    </f:facet>
                                                    <h:outputText value="#{country.name}" />
                                                </r:column>
             
                                                <a:support event="onselectionchange"
                                                           reRender="customerDetailPanel"
                                                           action="#{customerBean.identifySelectedCountry}"
                                                           oncomplete="Richfaces.hideModalPanel('countrySearch')"/>
                              </r:extendedDataTable>

       

                       <r:spacer height="10px"/>
                      <r:toolBar>
                          <r:toolBarGroup>
                              <a:commandButton value="Cancel"  onclick="Richfaces.hideModalPanel('countrySearch')" />
                          </r:toolBarGroup>
                      </r:toolBar>
                   </r:modalPanel>
               </h:form>

        • 1. Re: Extended Data Table selection within a modal panel
          ilya40umov

          Could you try with List of objects instead of countryDataModel? Because your problem may be in using dataModel and it possibly means bug in your DataModel code or in RF. And if it does not work fine with List it means that there is another problem on your page or in your beans.

          • 2. Re: Extended Data Table selection within a modal panel
            ilya_shaikovsky

            please read about modalPanel and form limitations.

            1 of 1 people found this helpful
            • 3. Re: Extended Data Table selection within a modal panel
              david-brighton

              Hi, I have looked at the info and modified the jsp accordingly, the full detail follows. What I have found is that the ExtendedDataTable selection works fine in the main panel but in all of the modal panels included it only gets set when I add an a:commandButton to the modal panel. It seems to get set when the modal panel closes.

               

              <%@ page contentType="text/html" %>

               

              <%@ taglib uri="http://java.sun.com/jsf/html"                    prefix="h" %>
              <%@ taglib uri="http://java.sun.com/jsf/core"                    prefix="f" %>
              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax"                 prefix="a" %>
              <%@ taglib uri="http://richfaces.org/rich"                         prefix="r" %>

               

              <f:view>
                  <html>
                      <head>
                          <title>Customer Search</title>
                          <link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/styles/styles.css" />
                      </head>
                      <body>
                     
                      <jsp:include page="pleaseWait.jsp"/>
                     
                      <%-- COUNTRY SEARCH --%>
                       <h:form>
                           <r:modalPanel id="countrySearch" >
                               <f:facet name="header">
                                       <h:outputText value="Country Search"/>
                               </f:facet>
                           
                                  <r:extendedDataTable id="countryTable"
                                                           height="200px"
                                                           width="100%"
                                                             value="#{customerBean.countryDataModel}"
                                                             var="country"
                                                             selectionMode="single"
                                                             selection="#{customerBean.countrySearchSelection}">
                      
                                                        <r:column sortBy="#{country.isoCode}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="ISO Code" />
                                                            </f:facet>
                                                            <h:outputText value="#{country.isoCode}" />
                                                        </r:column>
                                                       
                                                        <r:column sortBy="#{country.name}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="Country Name" />
                                                            </f:facet>
                                                            <h:outputText value="#{country.name}" />
                                                        </r:column>
                                      </r:extendedDataTable>

               

                               <r:spacer height="10px"/>
                              <r:toolBar>
                                  <r:toolBarGroup location="left">
                                      <a:commandButton value="Select" action="#{customerBean.identifySelectedCountry}"
                                                                     reRender="customerDetailPanel"
                                                                     onclick="Richfaces.hideModalPanel('countrySearch')"/>
                                  </r:toolBarGroup>
                                  <r:toolBarGroup location="right">
                                      <a:commandButton value="Cancel"  onclick="Richfaces.hideModalPanel('countrySearch')" />
                                  </r:toolBarGroup>
                              </r:toolBar>
                           </r:modalPanel>
                       </h:form>

               

                     
                      <%-- RM SEARCH --%>
                       <h:form>
                           <r:modalPanel id="rmSearch" >
                               <f:facet name="header">
                                       <h:outputText value="Relationship Manager Search"/>
                               </f:facet>
                           
                                  <r:extendedDataTable id="rmTable"
                                                           height="200px"
                                                           width="100%"
                                                             value="#{customerBean.rmDataModel}"
                                                             var="rm"
                                                             selectionMode="single"
                                                             selection="#{customerBean.rmSearchSelection}">
                      
                                                        <r:column sortBy="#{rm.firstName}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="First Name" />
                                                            </f:facet>
                                                            <h:outputText value="#{rm.firstName}" />
                                                        </r:column>
                                                       
                                                        <r:column sortBy="#{rm.surName}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="SurName" />
                                                            </f:facet>
                                                            <h:outputText value="#{rm.surName}" />
                                                        </r:column>
                                                       
                                                        <r:column sortBy="#{rm.costCenter}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="Cost Center" />
                                                            </f:facet>
                                                            <h:outputText value="#{rm.costCenter}" />
                                                        </r:column>
                                      </r:extendedDataTable>

               

                               <r:spacer height="10px"/>
                              <r:toolBar>
                                  <r:toolBarGroup location="left">
                                      <a:commandButton value="Select" action="#{customerBean.identifySelectedRM}"
                                                                     reRender="customerDetailPanel"
                                                                     onclick="Richfaces.hideModalPanel('rmSearch')"/>
                                  </r:toolBarGroup>
                                  <r:toolBarGroup location="right">
                                      <a:commandButton value="Cancel"  onclick="Richfaces.hideModalPanel('rmSearch')" />
                                  </r:toolBarGroup>
                              </r:toolBar>
                           </r:modalPanel>
                       </h:form>

               

                     
                      <%-- PARENT SEARCH --%>
                       <h:form>
                           <r:modalPanel id="parentSearch" >
                               <f:facet name="header">
                                       <h:outputText value="Customer Parent Search"/>
                               </f:facet>
                           
                                  <r:extendedDataTable id="parentTable"
                                                           height="200px"
                                                           width="100%"
                                                             value="#{customerBean.parentDataModel}"
                                                             var="parent"
                                                             selectionMode="single"
                                                             selection="#{customerBean.parentSearchSelection}">

               

                                                        <r:column sortBy="#{parent.internalRef}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="Internal Reference" />
                                                            </f:facet>
                                                            <h:outputText value="#{parent.internalRef}" />
                                                        </r:column>
                                                                
                                                        <r:column sortBy="#{parent.shortName}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="Short Name" />
                                                            </f:facet>
                                                            <h:outputText value="#{parent.shortName}" />
                                                        </r:column>
                                                       
                                                        <r:column sortBy="#{parent.longName}"  sortable="true" >
                                                            <f:facet name="header">
                                                                <h:outputText value="Long Name" />
                                                            </f:facet>
                                                            <h:outputText value="#{parent.longName}" />
                                                        </r:column>

               

                                                       
                                      </r:extendedDataTable>

               

                               <r:spacer height="10px"/>
                              <r:toolBar>
                                  <r:toolBarGroup location="left">
                                      <a:commandButton value="Select" action="#{customerBean.identifySelectedParent}"
                                                                     reRender="customerDetailPanel"
                                                                     onclick="Richfaces.hideModalPanel('parentSearch')"/>
                                  </r:toolBarGroup>
                                  <r:toolBarGroup location="right">
                                      <a:commandButton value="Cancel"  onclick="Richfaces.hideModalPanel('parentSearch')" />
                                  </r:toolBarGroup>
                              </r:toolBar>
                           </r:modalPanel>
                       </h:form>

               

                      
                       <%-- MAIN SCREEN --%>
                       <h:form>
                        
                                 <jsp:include page="header.jsp" />
                                 <jsp:include page="menuBar.jsp" />
                                
                                 <r:spacer height="20px"/>
                              <r:messages  layout="list" showDetail="false" showSummary="true" styleClass="error-text" >
                                  <f:facet name="errorMarker" >
                                      <h:graphicImage url="/images/sad.jpg"/>
                                  </f:facet>
                                  <f:facet name="infoMarker" >
                                      <h:graphicImage url="/images/happy.jpg"/>
                                  </f:facet>
                                 
                              </r:messages>
                              <r:spacer height="20px"/>

               

                              <r:simpleTogglePanel>
                             
                                  <f:facet name="header" >
                                      <h:outputText value="Customer Search"   />
                                  </f:facet>
                                 
                                  <a:outputPanel id="customerSearchPanel" >
                                 
                                      <h:panelGrid columns="2" >
                                              <h:outputLabel value="Search Type: " for="searchType" styleClass="default-label"/>

               

                                              <h:selectOneRadio id="searchType" value="#{customerBean.searchType}" styleClass="default-input" >
                                                  <f:selectItems value="#{customerBean.searchTypes}"/>
                                              </h:selectOneRadio>   

               

                                              <h:outputLabel value="Search Criteria: " for="searchCriteria" styleClass="default-label"/>
                                              <h:inputText id="searchCriteria" value="#{customerBean.searchCriteria}" styleClass="default-input" size="64"/>

               

                                      </h:panelGrid>
                                     
                                      <r:spacer height="10px"/>
                                     
                                     
                                      <r:toolBar>
                                          <r:toolBarGroup>
                                              <a:commandButton value="Search"  reRender="customerSearchResultsPanel" action="#{customerBean.customerSearch}" />
                                          </r:toolBarGroup>
                                      </r:toolBar>
                                     
                                  </a:outputPanel>
                              </r:simpleTogglePanel>

               

                              <r:spacer height="10px"/>

               

                              <r:simpleTogglePanel>
                             
                                  <f:facet name="header" >
                                      <h:outputText value="Customer Search Results"  />
                                  </f:facet>
                                 
                                  <a:outputPanel id="customerSearchResultsPanel" >
                                 
                                      <r:extendedDataTable id="customerTable"
                                                   height="200px"
                                                     value="#{customerBean.customerDataModel}"
                                                     var="customer"
                                                     selectionMode="single"
                                                     selection="#{customerBean.customerSearchSelection}">
                                                <r:column sortBy="#{customer.internalRef}"  sortable="true" width="20%">
                                                    <f:facet name="header">
                                                        <h:outputText value="Internal Reference" />
                                                    </f:facet>
                                                    <h:outputText value="#{customer.internalRef}" />
                                                </r:column>
                                                <r:column sortBy="#{customer.shortName}"  sortable="true" width="40%" >
                                                    <f:facet name="header">
                                                        <h:outputText value="Customer Name" />
                                                    </f:facet>
                                                    <h:outputText value="#{customer.shortName}" />
                                                </r:column>
                                                <r:column sortBy="#{customer.controllingTeamDescription}" sortable="true" width="40%" >
                                                    <f:facet name="header">
                                                        <h:outputText value="Controlling Team" />
                                                    </f:facet>
                                                    <h:outputText value="#{customer.controllingTeamDescription}" />
                                                </r:column>

               

                                                <a:support event="onselectionchange"
                                                           reRender="customerDetailPanel"
                                                           action="#{customerBean.identifySelectedCustomer}" />
                                        </r:extendedDataTable>

               

                                        <r:spacer height="10px" />                     

               

                                     
                                  </a:outputPanel>
                              </r:simpleTogglePanel>
                             
                              <r:spacer height="10px"/>
                             
                              <r:simpleTogglePanel>
                                  <f:facet name="header" >
                                      <h:outputText value="Customer Detail"  />
                                  </f:facet>
                                  <a:outputPanel id="customerDetailPanel" >
                                 
                                      <h:panelGrid columns="3" >

               

                                              <h:outputLabel value="Internal Reference: " for="internalRef" styleClass="default-label"/>
                                              <h:inputText id="internalRef" value="#{customerBean.internalRef}" styleClass="default-input" size="64"/>
                                              <h:inputHidden />
                                                                     
                                              <h:outputLabel value="Short Name: " for="shortName" styleClass="default-label"/>
                                              <h:inputText id="shortName" value="#{customerBean.shortName}" styleClass="default-input" size="64"/>
                                              <h:inputHidden />

               

                                             
                                              <h:outputLabel value="Long Name: " for="longName" styleClass="default-label"/>
                                              <h:inputText id="longName" value="#{customerBean.longName}" styleClass="default-input" size="128"/>
                                              <h:inputHidden />

               

                                             
                                              <h:outputLabel value="Controlling Team: " for="controllingTeam" styleClass="default-label"/>
                                              <h:selectOneMenu id="controllingTeam" value="#{customerBean.controllingTeamCode}" styleClass="default-input" >
                                                  <f:selectItems value="#{customerBean.controllingTeams}" />
                                              </h:selectOneMenu>
                                              <h:inputHidden />

               

                                             
                                              <h:outputLabel value="Company Registration: " for="companyReg" styleClass="default-label"/>
                                              <h:inputText id="companyReg" value="#{customerBean.companyReg}" styleClass="default-input" size="32"/>
                                              <h:inputHidden />

               

                                              <h:outputLabel value="Credit Rating: " for="creditRating" styleClass="default-label"/>
                                              <h:inputText id="creditRating" value="#{customerBean.creditRating}" styleClass="default-input" size="32"/>
                                              <h:inputHidden />
                                             
                                              <h:outputLabel value="Rating Source: " for="ratingSource" styleClass="default-label"/>
                                              <h:selectOneMenu id="ratingSource" value="#{customerBean.ratingSource}" styleClass="default-input" >
                                                  <f:selectItems value="#{customerBean.ratingSources}" />
                                              </h:selectOneMenu>
                                              <h:inputHidden />
                                             
                                              <h:outputLabel value="Review Date: " for="reviewDate" styleClass="default-label"/>
                                              <r:calendar id="reviewDate" value="#{customerBean.reviewDate}" styleClass="default-input"  defaultTime="true"/>
                                              <h:inputHidden />
                                                                             
                                              <h:outputLabel value="Relationship Manager: " for="rm" styleClass="default-label"/>
                                              <h:inputText id="rm" value="#{customerBean.relationshipManagerFullName}" styleClass="default-input" size="128"/>
                                              <a:commandButton value="Search"    onclick="Richfaces.showModalPanel('rmSearch', {height:'300px', width:'300px'});" reRender="customerDetailPanel" />

               


                                             
                                              <h:outputLabel value="Customer Parent: " for="parent" styleClass="default-label"/>
                                              <h:inputText id="parent" value="#{customerBean.parentShortname}" styleClass="default-input" size="128"/>
                                              <a:commandButton value="Search"    onclick="Richfaces.showModalPanel('parentSearch', {height:'300px', width:'300px'});" reRender="customerDetailPanel" />

               

                                             
                                              <h:outputLabel value="Country of Incorporation: " for="incorp" styleClass="default-label"/>
                                              <h:inputText id="incorp" value="#{customerBean.countryOfIncorporationDescription}" styleClass="default-input" size="128"/>
                                              <a:commandButton value="Search"    onclick="Richfaces.showModalPanel('countrySearch', {height:'300px', width:'300px'});" reRender="customerDetailPanel"  >
                                                  <a:actionparam name="option" value="INCORP" assignTo="#{customerBean.countryOption}" />
                                              </a:commandButton>

               

                                             
                                              <h:outputLabel value="Country of Operation: " for="operate" styleClass="default-label"/>
                                              <h:inputText id="operate" value="#{customerBean.countryOfOperationDescription}" styleClass="default-input" size="128"/>
                                              <a:commandButton value="Search"   onclick="Richfaces.showModalPanel('countrySearch', {height:'300px', width:'300px'});"
                                                                                reRender="customerDetailPanel">
                                                  <a:actionparam name="option" value="OPERATE" assignTo="#{customerBean.countryOption}" />
                                              </a:commandButton>

               

                                                                                                     
                                      </h:panelGrid>
                                 
                                      <r:spacer height="10px"/>
                                     
                                      <r:toolBar>
                                              <r:toolBarGroup>
                                                  <a:commandButton value="Reset Customer Detail"  reRender="customerDetailPanel"  action="#{customerBean.resetCustomerDetail}" />
                                                  <a:commandButton value="Add / Save Customer Detail"  action="#{customerBean.updateCustomerDetail}" />
                                              </r:toolBarGroup>
                                      </r:toolBar>                    </a:outputPanel>
                              </r:simpleTogglePanel>   

               

                 
                          </h:form>

               

                      </body>
                  </html>
              </f:view>