5 Replies Latest reply on Nov 30, 2007 2:30 AM by dashti

    By clicking every row of dataTable, show Popup to edit it's

    dashti

      I'm making an application with Jboss Seam , but now I have a problem.

      I have a page that contains a dataTable and in every row of dataTable I have a link that selects that row and you can edit hat row when you click on it. (something like what seam-gen produces when you use generate-entities). and also making new records in the pop up window.

      but now I don't like the navigation through pages and backing to the first page again, because my users may be confused.

      now I want to pop up a window to do this approach.

      I have 2 ways:
      1. using the rich:ModalPanel but using this, I should make a modal panel for every row of dataTable and it increases the size of the page. (very bad !!)
      but if I had a solution that could load the content of needed rich:ModalPanel at runtime , my problem will be solved. Is there a way to solve this?

      and also, if I don't think about the page size, I don't know how to load the page I want, with my desired parameters.

      2. using a pop up window, but the problem of this approach is, when popping up a windows, first I don't know how to tell that page to open with my parameters to edit the desired record. and second, I don't know how can I tell parent page, when the child page is closed and refresh some part of the page (maybe dataTable) when the edit is completed.

      Please help me!

        • 1. Re: By clicking every row of dataTable, show Popup to edit i
          dashti

          http://www.jboss.org/index.html?module=bb&op=viewtopic&t=116438 here is a relevant problem, but it doesn't work too,
          is there anybody that can help me.

          please help !

          • 2. Re: By clicking every row of dataTable, show Popup to edit i
            paradigmza

            For option 1: (because I think option 2 is rubbish) you just need a single modal panel, so you do not need to worry about page size. Just bind the contents of the modal panel to some variables then change the values of those variables with a ajax action and rerender the contents of the modalpanel...

            This is a JSF / Richfaces question and does not really involve seam, you should be able to find some examples in the Richfaces documentation / forums

            • 3. Re: By clicking every row of dataTable, show Popup to edit i
              dashti

              but I couldn't find how caN I do that.
              I made a HtmlModalPanel, but I couldn't add any components to this panel! how is it possible?

              • 4. Re: By clicking every row of dataTable, show Popup to edit i
                paradigmza

                like this

                <a4j:form>
                 <rich:dataTable value="#{rowDataModel}" var="row" onRowMouseOver="this.style.backgroundColor='#EAEAEA';this.style.cursor='pointer';"
                 onRowMouseOut="this.style.backgroundColor='#{FFFFFF}'">
                 <rich:column>
                 <f:facet name="header">
                 <h:outputText value="Name" />
                 </f:facet>
                 <h:outputText value="#{row.name}" />
                 </rich:column>
                 <rich:column>
                 <f:facet name="header">
                 <h:outputText value="Age" />
                 </f:facet>
                 <h:outputText value="#{row.age}" />
                 </rich:column>
                 <a4j:support event="onRowClick" oncomplete="Richfaces.showModalPanel('popUpPanel')" ajaxSingle="true" action="#{test.showPopUp}" reRender="popUpForm" />
                 </rich:dataTable>
                 </a4j:form>
                
                
                 <rich:modalPanel id="popUpPanel" resizeable="false" autosized="true">
                 <f:facet name="header">
                 <h:outputText value="Some header" />
                 </f:facet>
                 <f:facet name="controls">
                 <h:graphicImage value="/img/popupclose.gif" onclick="Richfaces.hideModalPanel('crudModalPanel')"></h:graphicImage>
                 </f:facet>
                 <a4j:form id="popUpForm">
                 Name : #{test.name}
                 Age : #{test.age}
                 </a4j:form>
                 </rich:modalPanel>



                and a seam component called test

                
                @DataModel
                List<User> rowDataModel;
                
                @DataModelSelection
                User selectedRow;
                
                public void showPopup() {
                 name = selectedRow.getName();
                 age = selectedRow.getAge();
                }


                so the action in


                <a4j:support event="onRowClick" oncomplete="Richfaces.showModalPanel('popUpPanel')" ajaxSingle="true" action="#{test.showPopUp}" reRender="popUpForm" />


                changes the values of test.name and test.age. The popup is then displayed with the changed values.


                • 5. Re: By clicking every row of dataTable, show Popup to edit i
                  dashti

                  hi paradigmz,
                  thank a lot for your best solution!

                  it works now!
                  a step forward!