Add is not working properly in PrimeFaces ver 5 dataTable with a dialogue

Question

I want to update primefaces datatable when click on 'Save New Invoice' button of dialog box. but it will update old data of dialog box in primefaces datatable.

XHTML file:

<h:form id="form">
    <p:dataTable id="invoiceTable" var="ipsDetail"
        value="#{invoiceBean.ipsDetails}" border="1" editable="true">

        <p:column headerText="Sr. No.">
            <h:outputText value="#{ipsDetail.serialNumber}" />
        </p:column>

        <p:column headerText="Description of Goods">
            <h:outputText value="#{ipsDetail.descriptionOfGoodsOrService}" />
        </p:column>

        <p:column headerText="HSN Code">
            <h:outputText value="#{ipsDetail.hsnCode}" />
        </p:column>

        <p:column headerText="Quantity">
            <h:outputText value="#{ipsDetail.quantity}" />
        </p:column>

        <p:column headerText="Rate">
            <h:outputText value="#{ipsDetail.rate}" />
        </p:column>

        <p:column headerText="Percentage Discount">
            <h:outputText value="#{ipsDetail.percentDiscount}" />
        </p:column>

        <p:column headerText="Amount">
            <h:outputText value="#{invoiceBean.amount}" />
        </p:column>

        <p:column>
            <p:rowEditor />
        </p:column>

        <f:facet name="footer">
            <p:commandButton value="Add Invoice" type="button"
                onclick="PF('addInvoice').show();" />
        </f:facet>
    </p:dataTable>

    <p:dialog header="Add Invoice" widgetVar="addInvoice" minHeight="40"
        showEffect="explode" hideEffect="fold">
        <table border="1">
            <tr>
                <td><h:outputText value="Sr. No." /></td>
                <td><h:outputText value="Description Of Goods Or Services" /></td>
                <td><h:outputText value="HSN Code" /></td>
                <td><h:outputText value="Quantity" /></td>
                <td><h:outputText value="Rate" /></td>
                <td><h:outputText value="Percentage Discount" /></td>
                <td><h:outputText value="Amount" /></td>
            </tr>
            <tr>
                <td><p:inputText value="#{invoiceBean.serialNumber}" size="3"
                        styleClass="Alingment" /></td>

                <td><h:inputTextarea value="#{invoiceBean.descriptionOfGoodsOrService}" cols="45"
                        required="true" label="Description" requiredMessage="Description Require Entry" /></td>

                <td><h:inputText value="#{invoiceBean.hsnCode}" size="6"
                        styleClass="Alingment" /></td>

                <td><h:inputText id="quaintity"
                        value="#{invoiceBean.quantity}" size="3" styleClass="Alingment"
                        required="true" label="Quantity" requiredMessage="Quantity Require Entry" /></td>

                <td><h:inputText id="rate" value="#{invoiceBean.rate}"
                        styleClass="Alingment" required="true" label="Rate" /></td>

                <td><h:inputText value="#{invoiceBean.percentDiscount}"
                        size="2" styleClass="Alingment" requiredMessage="Rate Require Entry" /></td>

                <td><h:inputText value="#{invoiceBean.amount}"
                        styleClass="Alingment" /></td>
            </tr>
        </table>

        <p:commandButton value="Save New Invoice"
            action="#{invoiceBean.addRow}" update="invoiceTable growl"
            process="@this invoiceTable" onclick="PF('addInvoice').hide();" />
        <p:growl id="growl" showDetail="true" sticky="true" />
    </p:dialog>

    <p:commandButton value="Save Invoices" ajax="false"
        action="#{invoiceBean.saveInvoiceData}" onclick="tickAllRows()" />
</h:form>

Managed Bean method:

This method is used to add dynamic row in primefaces datatable. I want new data which are enter from primefaces dialog box in new dynamically add row which code is below but it not working properly. invoiceTable doesn't update.

public void addRow() {

    ipsDetail = new InvoiceProductsServicesDetail();
    invoiceDao = new InvoiceDao();
    FacesContext facesContext = FacesContext.getCurrentInstance();

    try {
        if (descriptionOfGoodsOrService != "" && descriptionOfGoodsOrService != null && rate != 0 && quantity != 0) {
            ipsDetail.setSerialNumber(serialNumber);
            ipsDetail
                    .setDescriptionOfGoodsOrService(descriptionOfGoodsOrService);
            ipsDetail.setHsnCode(hsnCode);
            ipsDetail.setPercentDiscount(percentDiscount);
            ipsDetail.setQuantity(quantity);
            ipsDetail.setRate(rate);

            ipsDetails.add(ipsDetail);
            invoiceDao.insertIpsDetail(ipsDetail); // This method is used to store ipsDetail in database table.

            DataTable table = (DataTable) facesContext.getViewRoot()
                    .findComponent("form:invoiceTable");

            UIComponent uiTable = ComponentUtils.findParentForm(
                    facesContext, table);

            final AjaxBehavior behavior = new AjaxBehavior();
            RowEditEvent rowEditEvent = new RowEditEvent(uiTable, behavior,
                    table.getRowData());

            rowEditEvent.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
            table.broadcast(rowEditEvent);
        } 

    } catch (AbortProcessingException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

Luiggi Mendoza Luiggi Mendoza · Accepted Answer · 2014-08-06T07:12:17

Instead of updating the current component from server side, update the value in your <p:dataTable>, this means, just update the value of invoiceBean.ipsDetails. Let the framework to update the value of the <p:dataTable>. Also,you should use the whole name of your component :form:invoiceTable in <p:commandButton update>.

Add is not working properly in PrimeFaces ver 5 dataTable with a dialogue

1 Answers