Updating Primefaces datatable summary row using Ajax

Question

How can I update a primefaces datatable summary row after submitting a form (dialog)?

The datatable is already updated correctly after some CRUD operation, but the summary row doesn't. I'm using p:remoteCommand to update the summary row when filtering the datatable and it works fine.

The List.xhtml:

<h:form id="TreinamentosListForm">
<p:panel header="#{treinaBundle.ListTreinamentosTitle}" >
    <p:remoteCommand name="updateFooterSumCountId" update="datalist:footerSumCountId" />
    <p:dataTable id="datalist"
                filteredValue="#{treinamentosController.filteredTreinamentos}"
                value="#{treinamentosController.items}"
                var="item"
                rowKey="#{item.id}"
                paginator="true"
                selectionMode="single"
                selection="#{treinamentosController.selected}">
        <p:ajax event="filter" process="@form" update="@this" listener="#{treinamentosController.onFilter}" oncomplete="updateFooterSumCountId()" />
        <p:ajax event="rowSelect"   update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
        <p:ajax event="rowUnselect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
        <p:ajax event="rowDblselect" onsuccess="document.getElementById('TreinamentosListForm:viewButton').click();"/>

        <p:column sortBy="#{item.id}" filterBy="#{item.id}" style="text-align: right">
            <f:facet name="header">
                <h:outputText value="#{treinaBundle.ListTreinamentosTitle_id}"/>
            </f:facet>
            <h:outputText value="#{item.id}"/>
        </p:column>

        <p:columnGroup id="totalGroup"  rendered="true" type="footer" >
            <p:row>
                <p:column style="text-align:right">
                    <f:facet name="footer">
                        <!-- the summary row: -->
                        <h:outputText id="footerSumCountId" value="#{treinamentosController.sumCountId}" />
                    </f:facet>
                </p:column>
            </p:row>
        </p:columnGroup>        
    </p:dataTable>
    <f:facet name="header">
        <p:commandButton id="createButton" icon="ui-icon-plus"   value="#{treinaBundle.Create}" actionListener="#{treinamentosController.prepareCreate}" update=":TreinamentosCreateForm" oncomplete="PF('TreinamentosCreateDialog').show()"/>
        <p:commandButton id="viewButton"   icon="ui-icon-search" value="#{treinaBundle.View}" update=":TreinamentosViewForm" oncomplete="PF('TreinamentosViewDialog').show()" disabled="#{empty treinamentosController.selected}"/>
        <p:commandButton id="editButton"   icon="ui-icon-pencil" value="#{treinaBundle.Edit}" update=":TreinamentosEditForm" oncomplete="PF('TreinamentosEditDialog').show()" disabled="#{empty treinamentosController.selected}"/>
        <p:commandButton id="deleteButton" icon="ui-icon-trash"  value="#{treinaBundle.Delete}" actionListener="#{treinamentosController.delete}" update=":growl,datalist" disabled="#{empty treinamentosController.selected}">
        <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmDeleteMessage}" icon="ui-icon-alert"/>
        </p:commandButton>
    </f:facet>
</p:panel>
<ui:include src="/WEB-INF/include/confirmation.xhtml"/>
</h:form>

The Create.xhtml:

<p:dialog id="TreinamentosCreateDlg" widgetVar="TreinamentosCreateDialog" modal="true" resizable="false" appendTo="@(body)" header="#{treinaBundle.CreateTreinamentosTitle}" closeOnEscape="true" > 
    <h:form id="TreinamentosCreateForm">

        <h:panelGroup id="display" rendered="#{treinamentosController.selected != null}">
            <p:panelGrid columns="2" columnClasses="column">

                <p:outputLabel value="#{treinaBundle.CreateTreinamentosLabel_id}" for="id" />
                <p:outputLabel id="id" value="Value automatically generated from database." title="#{treinaBundle.CreateTreinamentosTitle_id}" />

            </p:panelGrid>
            <p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="@all,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'));">
                <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
            </p:commandButton>

            <p:commandButton value="#{treinaBundle.Cancel}" onclick="PF('TreinamentosCreateDialog').hide()"/>
        </h:panelGroup>
    </h:form>
</p:dialog>

Thanks in advance.

While I did not try a summary row, a data table footer also does not get updated in this way. Enclosing summary row contents inside another container component and then updating that component itself might help (No, I did not it try myself. Therefore, it is not a milestone. It might just be a chance). — Tiny
Tiny, thanks for your hint, but that did not worked. Fortunatelly, I've studied through Primefaces 5 documentation and learned how to simply resolve that (see my answer below). Thanks anyway!! — jMarcel

jMarcel jMarcel · Accepted Answer · 2015-02-06T16:08:14

After reading the Primefaces 5 documentation, what I did was to invoke (in the Create.xhtml) the Primefaces filter method, referencing through the widgetVar defined in the target datatable (in List.xhtml). Doing so, it triggers my p:remoteCommand, which in its turn, triggers the update for the summary row:

<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="@this,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'),PF('treinamentosTable').filter());" >
    <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>

If someone has a more elegant solution, please share. I had not time

Updating Primefaces datatable summary row using Ajax

1 Answers