I want to render a panelGrid with a fixed number of columns but elements are loaded from a list. The code should be as follows:
<h:panelGrid columns="3">
<h:outputText value="Header 1"/>
<h:outputText value="Header 2"/>
<h:outputText value="Header 3"/>
<ui:repeat value="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</ui:repeat>
</p:panelGrid>
The problem is this code is not rendering as I expected, because all panels are enclosed in the first TD generated by panelGrid, and I want a row break every 3 elements. It seems all repeat block is executed prior the rendering. I'm sure I can obtain this behaviour. What I'm doing wrong?
Thanks
ui:repeat is a component and it is part of the component tree. To create what you are planning try using tag handler c:forEach instead.
<c:forEach items="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</c:forEach>
Related
I'm creating a datatable with some some dynamically generated columns. In each of the cells of those columns, there's a button to refresh the data of that specific cell.
What I want is that the cell is blocked when the button on that cell is pressed.
Sample code:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="?????" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:columns>
</p:dataTable>
I don't know what should go in the block parameter to only block a cell. I also tried to just block="column", but even that wasn't blocking the column as I expected, instead it was just displaying the loading gif near the button but not blocking anything.
I have seen this question How update just specific cell in primefaces dataTable where the answers say it's not possible to specify a single cell, but it's from 2012, and the answers mention that it might get fixed on a later version.
After playing a bit, I found a solution.
You can define a <p:outputpanel id="cell"></p:outputpanel> surrounding the content of the cell, and then block it with block="cell" in the blockUI component.
The result would be something like:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<p:outputpanel id="cell">
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="cell" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:outputpanel>
</p:columns>
</p:dataTable>
I want to make a footer in dataTable and I need to update when the values inside the DT changes.
The problem is that ajax update simply don't occurs.
I've tried two ways:
<p:dataTable
id="dataTableAvaliacao" var="aluno"
value="#{alunoAvaliacaoMB.alunos}">
<p:column>
<p:inputText id="inputNota"
value="#{aluno.getNota(avaliacao.property).vlNotaString}">
<p:ajax event="change"
update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao:mediaAvaliacao" />
</p:inputText>
</p:column>
<p:columnGroup type="footer" id="mediaAvaliacao">
<p:row>
<p:column
footerText="Nota média da avaliação" />
</p:row>
<p:row>
<ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
var="avaliacao">
<p:column id="colunaMedia"
footerText="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}"/>
</ui:repeat>
</p:row>
</p:columnGroup>
<p:dataTable>
The update doesn't occurs...
second way (based on this answer on SO: How to ajax update an item in the footer of a PrimeFaces dataTable?):
<p:remoteCommand name="refreshFooter" update=":form:dataTableAvaliacao:outputMediaAvaliacao"/>
<p:dataTable
id="dataTableAvaliacao" var="aluno"
value="#{alunoAvaliacaoMB.alunos}">
<p:column>
<p:inputText id="inputNota"
value="#{aluno.getNota(avaliacao.property).vlNotaString}">
<p:ajax event="change"
update=":form:dataTableAvaliacao:mediaAluno" oncomplete="refreshFooter();" />
</p:inputText>
</p:column>
<p:dataTable>
<f:facet name="footer">
<h:outputText colspan="1" value="Nota média da avaliação:"/>
<ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
var="avaliacao">
<h:outputText id="outputMediaAvaliacao"
value="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}"
</ui:repeat>
</f:facet>
I've also tried
<p:remoteCommand name="refreshFooter" update=":form:outputMediaAvaliacao"/>
If I put
<p:ajax event="change"
update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao" />
in the first way, it works, but I don't wanna update all dataTable every time.
What I'm doing wrong? is it a bug?
Referring on 2nd way from your question that you based on this answer...
actually it is possible to update p:dataTable footer (even from within table itself)...but with one modification of your code.
Reason why your implementation does not work is that you did not take into account that <h:outputText id="outputMediaAvaliacao"../> is wrapped with ui:repeat.
In that case, p:remoteCommand is not able to find h:outputText component ID defined in update attribute because that ID does not exist in DOM:
ui:repeat is actually copying h:outputText as many times as list from value attribute is long and appending all parent IDs to newly created native HTML components
<span id="form:dataTableAvaliacao:avaliacao:0:outputMediaAvaliacao">...</span>
<span id="form:dataTableAvaliacao:avaliacao:1:outputMediaAvaliacao">...</span>
<span id="form:dataTableAvaliacao:avaliacao:2:outputMediaAvaliacao">...</span>
...
(you can see the same using DOM inspector of your favorite browser)
SOLUTION
After you learn and understand all facts stated above (like I did :) ), solution is quite simple:
wrap ui:repeat with some parent element and assign ID to parent element. For example like this
<f:facet name="footer">
<h:outputText value="Nota média da avaliação:"/>
<h:panelGroup id="footerPanel">
<ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
var="avaliacao" id="avaliacao">
<h:outputText id="outputMediaAvaliacao" value="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}" />
</ui:repeat>
</h:panelGroup>
</f:facet>
and modify p:ajax of p:inputText to update newly created element after text is changed
<p:ajax event="change" update=":form:dataTableAvaliacao:footerPanel" />
On this way all children elements of h:panelGroup will be updated (meaning only footer will be updated and not entire table).
And now, after you solved updating, you can focus on designing of all UI elements under h:panelGroup to make them fit your requirements.
I have the following DataTable in richFaces 4.5.2:
<rich:dataTable id="t" var="v" rows="#{bean.size}"
value="#{bean.value}" rowKeyVar="row">
<rich:column>
<a4j:commandLink action="#{bean.doAction}" render="t:#{row}">
<h:outputText value="#{recipientGroup.id}" />
<f:facet name="footer">
<h:outputText value="#{msgs['dynamicRecipientGroupList.table.id']}"/>
</f:facet>
</rich:column>
</rich:dataTable>
I thought specifying the rowId explicitly force the richFaces to render the only specified row, but It renders the whole table instead. What did I do wrong?
New syntax is described here. (All data iteration components)
In your case it should be something like:
render="t:#rows(row)"
I need to render the <p:commandButton> at last entry of the <p:datatable> only .
consider if p:datatable having n no.of rows means i have render the p:commandButton at nth row only.
I think that you better use <f:facet name="footer">
<f:facet name="footer">
<p:commandButton/>
</f:facet>
But if you really insist on last row...
Try the rowIndexVar, something like this :
<p:dataTable value="#{myBean.myList}" rowIndexVar="rowIndex" var="item">
<p:column>
<p:commandButton rendered="#{(rowIndex+1) eq myBean.myList.size()}"/>
</p:column>
</p:dataTable>
I don't know if I got the functional requirement right, but from what I understand you want to add a single commandButton at the bottom of the table, for that you might use the following inside datatable tags:
<f:facet name="footer">
<p:commandButton/>
</f:facet>
I have the following code, using PrimeFaces 3.0.M3, Tomcat 7 and Mojarra 2.1.3.
<p:dataGrid columns="1" var="answer" value="#{answersbysubject}">
<p:column>
<p:panel columns="1">
<h:outputText value="#{answer.question.name}" />
<p:dataGrid columns="5" var="selection" value="#{brain.selections}">
<p:column>
<h:panelGrid columns="1" styleClass="selections" id="mySelection">
<h:outputText value="#{selection.name}" />
<p:commandLink update="mySelection">
<p:graphicImage value="/img/CheckboxFull.png" rendered="#{selection == answer.selection}" />
<p:graphicImage value="/img/CheckboxEmpty.png" rendered="#{selection != answer.selection}" />
<f:setPropertyActionListener value="#{selection}" target="#{answer.selection}" />
</p:commandLink>
</h:panelGrid>
</p:column>
</p:dataGrid>
</p:panel>
</p:column>
</p:dataGrid>
sorry if a bit too verbose...
The point is: I want to realize a nicer 5-way checkbox (working like a set of radio buttons).
The whole works fine serverside, except that when I click another checkbox it rerenders ONLY the checkbox I just clicked. That is, I see two checked checkboxes - the old one doesn't clear until I do the F5 refresh in browser.
I tried to give ids to each tag and then let the commandLink update all, but nothing else than the current checkbox gets updated :(
The ids of a table row get probably mixed up during dynamic generation, is this why no other tags can be found/identified reliably for update? If this is the situation, then what would be the solution for me to update ONLY the current table row (not only the current table cell like now...)?
Many thanks!