Dynamically adding a row to primefaces dataTable

Question

I need to add a row to my datatable on click of a button - "Add Employee".

The datatable shows the records corresponding to a fixed list of Employees in the bean.

What I am doing is, on click of the "Add Employee" button , I am adding an empty record of Employee to the empList.

Is there any better way to do this?

Thanks.

On click of the "Add Employee" button, accept the input from the user in various fields. On submit, add the details to the list in the bean and do ajax update on datatable. Datatable will be refreshed as per the employee list in the bean. — rags, Mar 05 '12 at 05:33
ajax update is required as the new details are added to the list and available in the bean — rags, Apr 12 '12 at 09:51

rags · Answer 1 · 2012-04-12T11:25:35.003

list_Recs is list of records and shown in the data table.

<p:dataTable id="myTable" value="#{myBean.list_Recs}" selectionMode="single" var="myTableVar" selection="#{myBean.currentRec}">
    <p:ajax event="rowSelect" listener="#{myBean.handleRowSelect}" update=":myForm:myPanel"/>
    <p:column>
        <f:facet name="header">
            <h:outputLabel value="Field 1" />
        </f:facet>
        <h:outputLabel value="#{myTableVar.Field1}"/>
     </p:column>

     <p:column>
         <f:facet name="header">
             <h:outputLabel value="Field 2" />
         </f:facet>
         <h:outputLabel value="#{myTableVar.Field2}" />
     </p:column>

     <f:facet name="footer">
         <p:commandButton value="New" action="#{myBean.prepareForInsert}" update=":myForm:myPanel"/>
     </f:facet>
</p:dataTable>

<h:panelGrid id="myPanel" columns="2" >
    <h:outputLabel value="Field 1"/>
    <p:inputText id="fld1" value="#{myBean.newRec.field1}" />
    <h:outputLabel value="Field 2"/>
    <p:inputText id="fld2" value="#{myBean.newRec.field2}" />
    <p:commandButton action="#{myBean.createAction}" value="Submit" update="myGrowl myTable" />
</h:panelGrid>

When New button is clicked, create an emty instance of newRec in prepareForInsert routine of myBean. So that myPanel is filled with blanks in the fields. On Submit, add the newRec to list_Recs and the new record is diplayed in the data table because of the update on myTable. Hope this helps.

Hi, the code is perfectly fine. Many thanks for your efforts. But, I can't include a new panel. The requirement is to add a blank row at the end of the datatable. If I add a empty record at back end I need to refresh the datatable. If I refresh the datatable, I'll loose all the error messages etc. — Shikha Dhawan, Apr 20 '12 at 10:15
Rags, can you post a part of your bean code? I'm interested because I need the same thing but I get an error when adding a row to my list. The following error: DataModel must implement org.primefaces.model.SelectableDataModel when selection is enabled. And I only have this error since I upgraded fro PF2 to primefaces 3.2 — roel, May 30 '12 at 11:14
@roel, please check http://stackoverflow.com/questions/10513873/datamodel-must-implement-org-primefaces-model-selectabledatamodel-when-selection/10514441#10514441 — rags, May 30 '12 at 11:45
@roel, can you raise another question with pieces of code from xhtml and bean — rags, May 30 '12 at 12:14

score 4 · Answer 2 · answered Mar 05 '12 at 08:53

4

Either you open a dialog or a popup when clicking the add button. Then fill in the required fields (attached to a employee object. And when saving/submit you add that object to your list of employee objects. And rerender the datatable. Or you can initially add an empty emploee object to your list. Showing it in the datatable with inputfields. On add, you add the new employee to the list and rerender the list.

answered Mar 05 '12 at 08:53

roel

2,005
3
26
41

please check the following for your problem: http://stackoverflow.com/questions/10513873/datamodel-must-implement-org-primefaces-model-selectabledatamodel-when-selection/10514441#10514441 – rags May 30 '12 at 11:52
can you raise another question with pieces of code from xhtml and bean – rags May 30 '12 at 12:13

score 3 · Answer 3 · answered Mar 05 '12 at 07:54

3

A different option would be to show an empty employee in the footer facet of your datatable and add it to your list if the user clicks the add button. With this you can ensure that only correctly filled employee objects/entities are added to your list.

answered Mar 05 '12 at 07:54

Matt Handy

29,855
2
89
112

Dynamically adding a row to primefaces dataTable

3 Answers3

Linked