How can i add new row to datatable based on button click in primefaces?

Question

Hi i am very new to primefaces. I Tried the following functionality.

I add a button to primefaces datatable as a column.

Based on the button I add new row to same data table.

For this i use the following code.

in vendorcontacts.xhtml

    <p:dataTable id="dt" var="pmr" value="#{globalMaster.vendorContactsList}"
                                    style="width:900px;">
                                    <p:column headerText="Organisation">
                                        <h:outputText value="#{pmr.contactSno}" />
                                    </p:column>

                                    <p:column headerText="Program">
                                        <h:outputText value="#{pmr.location}" />
                                    </p:column>

                                    <p:column headerText="Action" >
                                       <p:commandButton value="Add New" action="#{globalMaster.getVendorContactsList}"  />
                                    </p:column>
                                </p:dataTable>

And my Bean code is:

public List<VendorContactDetails> getVendorContactsList(){
    try{
        VendorContactDetails veneContactDetails=new VendorContactDetails();
        vendorConList.add(veneContactDetails);

    }catch(Exception e){
        e.printStackTrace();
    }return vendorConList;
}

And now the problem is;

Intially my view page displays single row.

When i click the add new button my view page displays 3 rows instead of second row.

I find something in debug mode my list method calls no.of times(i.e no.of properties in my modal class i.e VendorContactDetails)

I change my bean scope session to view scope .but no use.

Is there any mistake in my code.Please guide me

tt_emrah · Accepted Answer · 2014-10-26 12:51:16Z

1

first of all, view scope is correct, but;

getVendorContactsList() should just initialize the list if needed, and return it.

public List<VendorContactDetails> getVendorContactsList(){
    if (vendorConList == null)
    {
        vendorConList = new ArrayList<VendorContactDetails>();
    }
    return vendorConList;
}

then, there should be a separate method to add an item to the list.

public void addVendorContactToList(){
    getVendorContactsList().add(new VendorContactDetails());
}

and at last, the button adding a new item should not be in a table column. it's not an operation related to an existing item/row.

<p:commandButton value="Add New" process="@this" update="dt"
    action="#{globalMaster.addVendorContactToList}"/>

if you are planning to update or delete an item in list, then those buttons will be in table columns.

answered Oct 26, 2014 at 12:51

tt_emrah

1,0631 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i add new row to datatable based on button click in primefaces?

in vendorcontacts.xhtml

And my Bean code is:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

in vendorcontacts.xhtml

And my Bean code is:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related