Why doesn't the summaryRow of my dataTable display? - jsf

Question

I have a dataTable on my JSF page:
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}" var="listaActDoc"
rowKey="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad}" selectionMode="single"
selection="#{cargaHorariaController.listaActivSelected}">
<p:column headerText="Actividad" style="width: 35%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad} - #{cargaHorariaController.descActiv(listaActDoc.pzptcabperjactPK.pzptcabperjactActividad)}"/>
</p:column>
<p:column headerText="Horas" style="width: 15%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactHoras}" />
</p:column>
<p:column headerText="" style="width: 20%">
<p:commandLink id="cmdSubacti" process="dataCabecera"
style="margin:0px" title="subactividad" value="Ver Subactividad"
action="#{cargaHorariaController.consultarSubactividadesDoc()}" update=":formPrincipal:formPrincipal1:pnlDet">
<f:setPropertyActionListener value="#{listaActDoc}" target="#{cargaHorariaController.activSelected}"/>
</p:commandLink>
</p:column>
<p:column headerText="" style="width: 30%">
<p:commandButton value="Actualizar" type="button" id="actiActu" action="#{cargaHorariaController.actualizar()}" onclick="PF('wdlgActualizar').show()" />
<p:spacer width="15px" height="0px"> </p:spacer>
<p:commandButton value="Eliminar" id="actiEli" ajax="false">
<p:confirm header="Eliminar actividad" message="Está seguro que desea eliminar esta actividad?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="font-size: 11px; text-height: font-size; text-align: left; font-weight: bold">
<div align="center">
<p:commandButton value="Sí" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancelar" type="button" styleClass="ui-confirmdialog-no CyanButton" icon="ui-icon-close" />
</div>
</p:confirmDialog>
</p:column>
<p:summaryRow>
<p:column colspan="1" style="text-align: right">
<p:outputLabel value="Total:" />
</p:column>
<p:column colspan="2" style="text-align: left">
<p:outputLabel value="#{cargaHorariaController.horasAct}" />
</p:column>
</p:summaryRow>
</p:dataTable>
I want the sum of the column "Horas" at the bottom of the table, but the summaryRow doesn't appear:
I have also the same problem with icons in my buttons (jQueryUI icons and Font Awesome icons).
How can I fix it?
Edited: I used h:outputText and I changed the colspan properties so now they add up to 4, but the same result: no p:summaryRow. I called horasAct because that variable has the result of the sum.

Answer 1

First for display information it's better to use a h:outputText component. Because a p:outputLabel component need to bind a label with a input field.
It gives some advantages for example:
If you mark a input field like required neer label for this field will display '*' symbol
Value from label will use in the Faces Messages
Second about your p:summaryRow. In the p:dataTable you have four columns but in columns in the p:summaryRow colSpan properties in total don't give 4 (only 3).
Also you said that want to sum values from the "Horas" column. But call
#{cargaHorariaController.horasAct} instead of #{listaActDoc.pzptcabperjactHoras}
Update
You need to add a sortBy property then a summaryRow will display. But this component calculate a sum of a column value for same rows. You can see more examples here just to try sort a table by different columns.
I think you should use a columnGroup component and add a footer for your table. This component add only one row to the bottom of your table and you can output there sum for horas column.