How to add multiple rows in rich:datatable when by manually clicking add new Button?

Question

I am designing a web page in which there is a rich:DataTable which I am using to add new customer information in the Database .

So each time a click the "Add New" button, a new row should appear in the rich datatable with Blank Input Text Fields .

Problem : Even how many times I am clicking the "Add New" Button, there remains only one row in table .

Following is the code of my web page :

<a4j:outputPanel id="rep" rendered="#{adminBean.currentItem == 'Participant' || adminBean.currentItem == 'Administrator'}">
    <rich:panel rendered="#{not empty adminBean.currentItem}" header="Add Customer" id="out">
        <h:panelGrid columns="2">
            <h:commandButton value="Add New" type="button" style="width: 70px" actionListener="#{adminBean.addCustAction}">
                <a4j:ajax  render="out"/>
            </h:commandButton>
            <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
        </h:panelGrid>

        <rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
        <rich:dataTable id="setcust" value="#{adminBean.customerList}" var="custl" rows="10" style="width: 900px;margin-top: 5px">

            <rich:column id="col1">
                <f:facet name="header">
                    <h:outputText value="Customer ID" style="font-size: smaller; font-weight: bolder; "/>
                </f:facet>
                <h:inputText value="#{custl.Id}"></h:inputText>
            </rich:column>
            <rich:column id="col2">
                <f:facet name="header">
                    <h:outputText value="First Name" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.FirstName}"></h:inputText>
            </rich:column>
            <rich:column id="col3">
                <f:facet name="header">
                    <h:outputText value="Last Name" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.lastName}"></h:inputText>
            </rich:column>
            <rich:column id="col4">
                <f:facet name="header">
                    <h:outputText value="Phone" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.phoneNo}"></h:inputText>
            </rich:column>
            <rich:column id="col5">
                <f:facet name="header">
                    <h:outputText value="Address" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.address}"></h:inputText>
            </rich:column>
            <rich:column id="col6">
                <f:facet name="header">
                    <h:outputText value="City" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.city}"></h:inputText>
            </rich:column>
            <rich:column id="col7">
                <f:facet name="header">
                    <h:outputText value="Email" style="font-size: smaller; font-weight: bolder;"/>
                </f:facet>
                <h:inputText value="#{custl.email}"></h:inputText>
            </rich:column>
        </rich:dataTable>
    </rich:panel>
</a4j:outputPanel>

Following is the code of the AdminBean:

@ManagedBean
@ViewScoped
public class AdminBean {

    private String currentType;
    private String currentItem;
    private List<Customer> customerList = new ArrayList<Customer>();
    private List<Account> accountList;
    private List optionList;

    public List getOptionList() {
        optionList = new ArrayList<String>();
        if (currentType.equals("Add New User")) {
            optionList.add("Participant");
            optionList.add("Administrator");
        } else if (currentType.equalsIgnoreCase("Manage Balance")) {
            optionList.add("Withdrawl");
            optionList.add("Deposit");
        }
        return optionList;
    }

    public void setOptionList(List optionList) {
        this.optionList = optionList;
    }

    public List<Account> getAccountList() {
        return accountList;
    }

    public void setAccountList(List<Account> accountList) {
        this.accountList = accountList;
    }

    public List<Customer> getCustomerList() {
        System.out.println("got list..................");
        return customerList;
    }

    public void setCustomerList(List<Customer> customerList) {
        this.customerList = customerList;
    }

    public String getCurrentItem() {
        return currentItem;
    }

    public void setCurrentItem(String currentItem) {
        this.currentItem = currentItem;
    }

    public String getCurrentType() {
        return currentType;
    }

    public void setCurrentType(String currentType) {

        this.currentType = currentType;
    }

    public void addCustAction(){
        System.out.println("kshitij jain.......actionListener"+customerList.size());

        Customer cust = new Customer();
        customerList.add(cust);
    }
}

score 0 · Answer 1 · edited May 23 '17 at 10:25

You have some problems in your code:

Every UICommand should be wrapped inside a <h:form> in order to work. Please refer to commandButton/commandLink/ajax action/listener method not invoked or input value not updated, section 1.
You're not declaring the actionListener method in the right way, the method needs an ActionEvent event parameter. It looks like you wanted to use action instead. Refer to Differences between action and actionListener for more info.
In RichFaces 4, there's no need to use <h:commandButon> together with <a4j:ajax>, this is the purpose of <a4j:commandButton>. From the documentation:

The component is similar to the JavaServer Faces (JSF) component, but additionally includes Ajax support.

Tying all these advices together, your JSF code should be (I've omitted not necessary code to test the results like styles and rendered conditions)

<a4j:outputPanel id="rep" >
    <rich:panel id="out">
        <h:form id="frmCustomerData">
            <h:panelGrid columns="2">
                <a4j:commandButton value="Add New"
                    action="#{adminBean.addCustAction}"
                    render="setcust" />
                <a4j:commandButton value="Delete" />
            </h:panelGrid>
            <rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
            <rich:dataTable id="setcust" value="adminBean.customerList" var="custl" rows="10" style="width: 900px;margin-top: 5px">
                <!-- datatable content... -->
            </rich:dataTable>
        </h:form>
    </rich:panel>
</a4j:outputPanel>

There's no need to make any change on the managed bean.

After I put everything inside the form, CommandButton stopped working. It is not even calling the action method. I have changed my code and now call to datatable and action method is going fine but still , now I am facing another problem : I am getting following exception : javax.el.PropertyNotFoundException: /adminhome.xhtml @145,73 value="#{cust1.Id}": The class 'bank.persistence.entity.Customer' does not have the property 'Id'. But I have seen that I already have this property in my bean . I am updating above mentioned code. — Kshitij Jain, Mar 23 '13 at 06:03
@KshitijJain make sure you don't have nested ``s in your code. Next time don't just copy/paste code blindly, instead adapt the posted code to your needs. Also, read the links and references in the answer, they're for providing more details on the suggestions. AFAIK you haven't changed the `` to `` as suggested (at least it's not in your actual edit). — Luiggi Mendoza, Mar 23 '13 at 06:17
First of all Thanks very much for the links you have provided. They are really very helpful . I do not have nested forms in my code. And I have not updated code to include because that code was not working . Finally Now same code is working fine . I realized that I need to render complete panel again when I am adding a new row to the dataTable. So that everything along with Datascroller works fine. I am updating the correct code above . The problem related to BeanPropertyNot found was happening because I was putting fields with wrong naming conv. in Customer Bean . — Kshitij Jain, Mar 23 '13 at 06:37

How to add multiple rows in rich:datatable when by manually clicking add new Button?

1 Answers1