Editable DataTable from dialog

[AEON]

Hi guys. I'm new in primefaces and I need some help for a critical time-limited project, which includes creating a user management page.

The following example from the showcase demonstrates how someone can select a row and view its info at a popup <p:dialog>: http://www.primefaces.org/showcase/ui/d ... Column.jsf
I want to implement master-detail editing, meaning I need to edit the row info from the dialog popup (have inputText instead of outputText) and also have a button there to submit edited data back to the main form (so that rows in datatable will be updated).

In other words I want to click on a user from the dataTable, edit his details from the popup, submit them and have his row values updated back at the main dataTable (the one that displays the list of users).

What do I have to do to achieve this?

[kwintesencja]

Hi there,

basically the same as the example but as you want to submit something will you need to put the dialog in a different form to avoid some issues, something like this:

Code: Select all

<h:form id="tableForm">  
   
     <p:dataTable id="carTable" var="car" value="{tableBean.cars}" paginator="true" rows="10">  
   
         <p:column>  
             <f:facet name="header">  
                 <h:outputText value="Model" />  
             </f:facet>  
             <h:outputText value="{car.model}" />  
         </p:column>  
   
         <p:column>  
             <f:facet name="header">  
                 <h:outputText value="Year" />  
             </f:facet>  
             <h:outputText value="{car.year}" />  
         </p:column>  
   
         <p:column>  
             <f:facet name="header">  
                 <h:outputText value="Manufacturer" />  
             </f:facet>  
             <h:outputText value="{car.manufacturer}" />  
         </p:column>  
   
         <p:column>  
             <f:facet name="header">  
                 <h:outputText value="Color" />  
             </f:facet>  
             <h:outputText value="{car.color}" />  
         </p:column>  
   
          <p:column style="width:32px">  
             <p:commandButton update="dlgForm:display" oncomplete="carDialog.show()"  
                     image="ui-icon ui-icon-search">  
                 <f:setPropertyActionListener value="{car}"  
                     target="{tableBean.selectedCar}" />  
             </p:commandButton>  
         </p:column>  
   
     </p:dataTable>  



 <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"  
               width="200" showEffect="explode" hideEffect="explode">  
   		<h:form id="dlgForm">


         <h:panelGrid id="display" columns="2" cellpadding="4">  
   
             <f:facet name="header">  
                 <p:graphicImage value="/images/cars/{tableBean.selectedCar.manufacturer}.jpg"/>  
             </f:facet>  
   
             <h:outputText value="Model:" />  
             <h:inputText value="{tableBean.selectedCar.model}" />  
   
             <h:outputText value="Year:" />  
             <h:inputText value="{tableBean.selectedCar.year}" />  
   
             <h:outputText value="Manufacturer:" />  
             <h:inputText value="{tableBean.selectedCar.manufacturer}" />  
   
             <h:outputText value="Color:" />  
             <h:inputText value="{tableBean.selectedCar.color}" />  
         </h:panelGrid>  
		 <p:commandButton value="save" action="#{tableBean.save}" update="tableForm:carTable" oncomplete="carDialog.hide()"
		</form>
     </p:dialog>  

Also if you want to keep the dialog open when validation failled take a look at the login example at showcase

[AEON]

I tried it using your version, with a few syntax corrections:

Code: Select all

<h:body>
<h:form id="tableForm">

     <p:dataTable id="carTable" var="car" value="#{tableBean.cars}" paginator="true" rows="10">

         <p:column>
             <f:facet name="header">
                 <h:outputText value="Model" />
             </f:facet>
             <h:outputText value="#{car.model}" />
         </p:column>

         <p:column>
             <f:facet name="header">
                 <h:outputText value="Year" />
             </f:facet>
             <h:outputText value="#{car.year}" />
         </p:column>

         <p:column>
             <f:facet name="header">
                 <h:outputText value="Manufacturer" />
             </f:facet>
             <h:outputText value="#{car.manufacturer}" />
         </p:column>

         <p:column>
             <f:facet name="header">
                 <h:outputText value="Color" />
             </f:facet>
             <h:outputText value="#{car.color}" />
         </p:column>

          <p:column style="width:32px">
             <p:commandButton update="dlgForm:display" oncomplete="carDialog.show()"
                     image="ui-icon ui-icon-search">
                 <f:setPropertyActionListener value="#{car}"
                     target="#{tableBean.selectedCar}" />
             </p:commandButton>
         </p:column>

     </p:dataTable>
</h:form>


<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
               width="200" showEffect="explode" hideEffect="explode">
         <h:form id="dlgForm">


         <h:panelGrid id="display" columns="2" cellpadding="4">

             <f:facet name="header">
                 <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
             </f:facet>

             <h:outputText value="Model:" />
             <h:inputText value="#{tableBean.selectedCar.model}" />

             <h:outputText value="Year:" />
             <h:inputText value="#{tableBean.selectedCar.year}" />

             <h:outputText value="Manufacturer:" />
             <h:inputText value="#{tableBean.selectedCar.manufacturer}" />

             <h:outputText value="Color:" />
             <h:inputText value="#{tableBean.selectedCar.color}" />
         </h:panelGrid>
       <p:commandButton value="save" action="#{tableBean.save}" update="tableForm:carTable" oncomplete="carDialog.hide()"/>
      </h:form>
     </p:dialog>  
    </h:body>

I also used the Car.class found here: http://code.google.com/p/primefaces/sou ... ava?r=2274 and the TableBean.class of the same showcase example, but when I click the edit row button, the dialog that pops up contains random values instead of those of the selected row. Each time I click again the magnifier glass button (from *any* row), the dialog inputTexts keep on updating with random values. Am I doing something wrong?


P.S 1: I need an example of what to put in tableBean.save() and if possible, in a tableBean.delete() that would handle an additional "delete row" button.
P.S 2: The only thing I changed to Car.class and Tablebean.class was to add @ManagedBean on top of both, since I use JSF 2.0.

[kwintesencja]

About the example of how to save/delete there are hundred of manners to do that and its not the purpose of this forum so i suggest you to do some researches to find the best way to that in your case and if you find problems with PRIMEFACES than you can came and post here.

Relative to your problem of ramdom cars maybe its because of the bean scope, try with @ViewScoped.

[AEON]

Adding @ViewScoped at TableBean worked for viewing the proper row info. Thank you friend