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)"
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 am using rich:dataTable inside the a4j:repeat.
Every time the dataTable Scroller refer the index from the previous dataTable scroller index value. So the current dataTable having values but it displays empty table.
Because of,
previous dataTable list size is 200.
previous dataTable scroller index is 7
Current DataTable list size is 5.
<a4j:repeat value="#{Bean.outerTOList}" var="sampleValue">
<rich:dataTable id="dataTable"
var="innerTo"
rows="5"
value="#{sampleValue.sampleInnerTOList}" >
<f:facet name="header">
<rich:column>
<h:outputText value="Header"/>
</rich:column>
</f:facet>
<rich:column>
<h:outputText value="#{innerTo.name}"/>
</rich:column>
<f:facet name="footer">
<rich:datascroller id="dataTableScrollerId"
ajaxSingle="false" maxPages="3"
page="1">
</rich:datascroller>
</f:facet>
</rich:dataTable>
</a4j:repeat>
I think you have to change the <ui:repeat> to a (JSTL) <c:forEach> (see http://www.crazysquirrel.com/computing/java/jsp/jstl-forEach.jspx) because it has another lifecycle and your implementation using ui:repeat won't work in this scenario.
After doing so you probably also need some kind of "discriminator" for your IDs, because you cannot name all table components the same. You would have to use something like id="datatable0",... id="datatable1" and so on. You can use c:forEach's varStatus="status"property to do so. It has a property which you can use as the counter: #{status.index}
I have a data model with structure : TreeMap < String, TreeMap< String, Double>> resultMap;
This is stored in a SessionScoped ManagedBean.
I am trying to output this via a dynamic < rich:extendedDataTable> where;
Key of first map is the row label
Value of first map is a second map ( corresponds to the columns on the row
Key of second map is the columns header
Value of second map is the columns value
Source Code:
<rich:extendedDataTable
value="#{queryBean.resultMap.keySet().toArray()}" var="key"
frozenColumns="1" styleClass="rich-extdt">
<rich:column width="75px">
<f:facet name="header">
<h:outputText value="Mediation" />
</f:facet>
<h:outputText value="#{key}" />
</rich:column>
<rich:column width="75px">
<f:facet name="header">
<h:outputText value="Test" />
</f:facet>
<h:outputText value="#{queryBean.resultMap[key]}" />
</rich:column>
<c:forEach items="#{queryBean.resultMap[key]}" var="map">
<rich:column width="75px">
<f:facet name="header">
<h:outputText value="#{map.key}" />
</f:facet>
<h:outputText value="#{map.value}" />
</rich:column>
</c:forEach>
</rich:extendedDataTable>
Output:
The first column is correctly outputting the keys of the first map.
The second column (used for debugging) is correctly outputting the map structure ( when I apply .keySet() to the structure I do get all the correct keys ).
Using: jstl 1.2.0, jsf 2.1 - mojarra, richfaces 4.x, tomcat 7.
Update:
As stated here, the < c:forEach> has no access to the < rich:dataTable> attributes, hence unable to use key. Is there any simple workaround to this?
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>