3 Replies Latest reply on Nov 14, 2008 1:56 PM by mail.micke

    Displaying different panelgrids on same page

    rbhayani
      Hi All,

      I have a conf.xhtml page with a <rich:combobox> listing two items. What I want is based on the value selected in the combobox, it must either display first panelgrid or the other one.

      Snippet:
      <h:panelGrid columns="2" columnClasses="type, value">
           <h:column>
                   <h:outputLabel name="typeOfConference">
                <b>Type of Conference:</b><font color="red"><sup>*</sup></font>
                </h:outputLabel>
           </h:column>
           <h:column>
                <rich:comboBox name="toc" value={conference.typeOfConference}" tabindex="2">
                        <f:selectItem id="DI" itemValue="Dial-In" />
                        <f:selectItem id="DO" itemValue="Dial-Out" />
                   </rich:comboBox>
           </h:column>
      </h:panelGrid>

      What I want is when "Dial-out" is selected then a particular panelgrid with different sent of elements get visible. And when "Dial-IN" is selected then other panelgrid with its won set elements gets visible. On the same page.

      I hope I have made myself clear.

      How do I achieve it? If some one can help me on this asap.

      regards,
      Raziya
        • 1. Re: Displaying different panelgrids on same page
          mail.micke

          Hi


          You can achieve this using <a4j:support/> have a read through the implementation and look at the richfaces demo. Basically this tag allows you to do things on events, with the combo box you'll probably attach it to the onchange event (check the rich:comboBox documentation for supported events) and reRender the are you are interested in.


          If you run into problems just paste the code here and we'll try to help.


          Cheers,
          Micke

          • 2. Re: Displaying different panelgrids on same page
            rbhayani

            That would require some readin which I am doing already. WHat if I use radio button. Will rerender still work? Or I will need to use something else too?

            • 3. Re: Displaying different panelgrids on same page
              mail.micke

              <a4j:support/> works with most kinds of components.


              You would still need to use <a4j:support/> if you want to trigger an ajax submit and rerender from non-button/link components.


              Here is an example. When an item from the dropdown list is selected the form is submitted, a method on the backing bean is called to load some data and then finally the wrapper is rerendered and an amount is displayed instead of just a spacer.


              <a4j:outputPanel id="emCollWrapper">
                   <rich:spacer rendered="#{empty complLimitsBacking.emColl}"/>
                   <h:inputText id="emColl" 
                                       value="#{complLimitsBacking.emColl.amountTotal}"
                                       rendered="#{!empty complLimitsBacking.emColl}"
                                       valueChangeListener="#{complLimitsBacking.valueChanged}">
                        <lcf:convertUnitDouble minFractionDigits="2" unit="1000000"/>
                        <f:validateDoubleRange minimum="0"/>                             
                   </h:inputText>
              </a4j:outputPanel>
              <h:selectOneMenu value="#{complLimitsBacking.emCollCountry}">
                   <a4j:support event="onchange" 
                                   action="#{complLimitsBacking.loadEmCollSovHedgesLimitData()}"
                                   reRender="emCollWrapper"/>
                   <s:selectItems value="#{complLimitsBacking.allCountries}" 
                                       var="country"
                                       itemValue="#{country.code}"
                                       label="#{country.name}"/>
              </h:selectOneMenu>
              
              



              Hope it helps,
              Micke