jsf - How to ajax update an item in the footer of a PrimeFaces dataTable? -
this visual of table have:
+---------+------------+-------------------+ | header1 | header2 | header3 | +---------+------------+-------------------+ | row | input | calc'ed output | | row b | input b | calc'ed output b | | etc.. | etc.. | etc.. | +---------+------------+-------------------+ | total: total calc'ed output | +------------------------------------------+
and stripped-down code:
<p:datatable id="mytable" value="#{mybean.somelist}" var="currentitem"> <p:column headertext="header1"> <h:outputtext value="#{currentitem.name}" /> </p:column> <p:column headertext="header2"> <pe:inputnumber value="#{currentitem.inputval}"> <p:ajax event="change" listener="#{mybean.changelistener}" update="outputval outputtotal" /> </pe:inputnumber> </p:column> <p:column headertext="header3"> <h:outputtext id="outputval" value="#{currentitem.outputval}" /> </p:column> <f:facet name="footer"> total: <h:outputtext id="outputtotal" value="#{mybean.total}" /> </f:facet> </p:datatable>
the mybean.somelist
arraylist<someotherbean>
1 string , 2 integers, getters , setters. mybean.changelistener
calculates second integer first given row, , total rows.
so, when type in 1 of inputs focus out, listener called , calculation done, on screen, value in third column changes, total stubbornly remains zero. i'm sure has primefaces appending row index generated id's of each input , output, can't figure out how output in footer (whose generated id mainform:mytable:0:outputtotal
).
now, update parent table. whenever input receive focus part of update target, focus lost, , under extremely strict accessibility rules table must keyboard friendly (type number, tab, type number, tab, etc...)
i have tried:
- update=":outputtotal" (gave exception cannot find component identifier...)
- update="mytable:0:outputtota (same exception)
- update="mytable:outputtotal" (no update, total stays zero)
- wrap text in panelgroup , update (no update)
(primefaces 3.5.0 myfaces unknown version)
you can't update values of table within table. however, can use p:remotecommand
achieve this. also, use celledit event on whole table (instead of single p:ajax
on pe:inputnumber
). overall result be:
<p:remotecommand name="refreshfooter" update=":formname:outputtotal"/> ... <p:datatable id="mytable" value="#{mybean.somelist}" var="currentitem"> <p:column headertext="header1"> <h:outputtext value="#{currentitem.name}" /> </p:column> <p:column headertext="header2"> <pe:inputnumber value="#{currentitem.inputval}"> <p:ajax event="change" listener="#{mybean.changelistener}" process="@this" oncomplete="refreshfooter();" update="outputval"/> </pe:inputnumber> </p:column> <p:column headertext="header3"> <h:outputtext id="outputval" value="#{currentitem.outputval}" /> </p:column> <f:facet name="footer"> total: <h:outputtext id="outputtotal" value="#{mybean.total}" /> </f:facet> </p:datatable>
please note might need add partialsubmit="true"
p:ajax
, way submit component's data. if celledit event idea, need make datatable editable, , add following in p:datatable
, , rid of p:ajax
inside pe:inputnumber
<p:ajax event="celledit" partialsubmit="true" listener="#{mybean.oncelledit}" process="@this" oncomplete="refreshfooter();"/>
good luck!
Comments
Post a Comment