6 Replies Latest reply on Feb 17, 2009 1:00 PM by leo amidula

    need a panelGrid example (more complete then richfaces-demo)

    leo amidula Newbie

      I need one panelGrid example that perform access to data in a single “row� of the panelGrid component and navigate to the “detail� page.
      code needed: page tags and backing bean
      Can you give me some help?
      Thanks.

        • 1. Re: need a panelGrid example (more complete then richfaces-d
          Florian Marwede Expert

          Hi leocesar,
          I do not really understand what you need more than the demo (you know that you can download the backing bean stuff of the demo also?)...perhaps you get the quickest answer when you post concrete code with a concrete problem.

          • 2. Re: need a panelGrid example (more complete then richfaces-d
            leo amidula Newbie

            In this code, how can I get one row of data and navigate to the detail page where the user can update that single row, someone said that I needed to use a data model, how does it work in richfaces dataGrid, examples?
            Thanks.

            
            <rich:dataGrid value="#{productList.allProducts}" var="prod"
             columns="3" elements="9" align="center" width="100%">
             <rich:panel>
             <f:facet name="header">
             <h:outputText value="#{prod.prodname}"></h:outputText>
             </f:facet>
             <h:graphicImage value="/images/#{prod.prodimage}" width="160"
             height="160" alt="Product photo" />
             <br />
             <h:outputText value="Code: " styleClass="label"/>
             <h:outputText value="#{prod.prodcod}" />
             <br />
             <h:outputText value="Price: " styleClass="label"/>
             <h:outputText value="#{prod.prodprice}">
             <f:convertNumber pattern="R$ ####,##0.00" />
             </h:outputText>
             <br />
             <h:outputText value="Available amount: " styleClass="label"/>
             <h:outputText value="#{prod.prodstock}">
             <f:convertNumber pattern="####,##0.##" />
             </h:outputText>
             <br />
             <br />
             <h:commandButton value="Buy" type="submit" action=" ? " />
             </rich:panel>
             <f:facet name="footer">
             <rich:datascroller></rich:datascroller>
             </f:facet>
             </rich:dataGrid>
            
            
            


            • 3. Re: need a panelGrid example (more complete then richfaces-d
              Florian Marwede Expert

              Do you mean something like shown here:

              http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf

              Okay this is SDT and not data grid, but maybe you see here some things you can take.

              • 4. Re: need a panelGrid example (more complete then richfaces-d
                Florian Marwede Expert

                Here one (of maybe many) possibility to realize that.

                You put buttons in your dataGrid like this:

                 <a4j:commandButton value="Show Details" reRender="detailsPanel"
                 actionListener="#{appBean.select}"
                 oncomplete="javascript:Richfaces.showModalPanel('panel');" >
                 <f:param name="test" value="#{item.id}" />
                 </a4j:commandButton>
                


                In your java code you need a method like this:

                 public void select(ActionEvent event) {
                 Map paramMap= FacesContext.getCurrentInstance()
                 .getExternalContext().getRequestParameterMap();
                 String id= (String) paramMap.get("id").toString();
                 setSelected(id);
                 }
                


                And finally you need a modal panel to show your details:

                <rich:modalPanel id="panel" autosized="false" keepVisualState="false" width="315" height="230">
                 <f:facet name="header">
                 <h:outputText value="Details"/>
                 </f:facet>
                 <f:facet name="controls">
                 <span style="cursor:pointer"
                 onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
                 </f:facet>
                 <a4j:outputPanel layout="block" id="detailsPanel">
                 <h:outputText value="#{appBean.selected.name}" />
                 </a4j:outputPanel>
                </rich:modalPanel>
                


                I don't think it's the best way, but it works and maybe it helps you.

                • 5. Re: need a panelGrid example (more complete then richfaces-d
                  Florian Marwede Expert

                  Sorry, there's one error in the code. The name of the parameter must be identical:

                   <a4j:commandButton value="Show Details" reRender="detailsPanel"
                   actionListener="#{appBean.select}"
                   oncomplete="javascript:Richfaces.showModalPanel('panel');" >
                   <f:param name="id" value="#{item.id}" />
                   </a4j:commandButton>
                  


                  One additional comment: Of course the used method "setSelected" has to do a bit of logic: search the item to select by id and set it.

                  • 6. Re: need a panelGrid example (more complete then richfaces-d
                    leo amidula Newbie

                    Thank you very much fmarwede! You're the richfaces master. I'll study your code and apply it to my "learning sales app".
                    Thanks again.