I am new to JSF. I have a p:datatable in which I set to edit rows, but just editing one of the cells. I have the row selection icon, the one looking like a pencil, and then the icons for confirming the editing and for cancelling the editing. When I select the row to edit, the menu of the involved cell does not show the item values (in my case booleans - true/false). Even if, when I put the mouse over an item, this shows.
I don't get any warning/error/exception with that.
<p:column headerText="Available">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{device.available}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{device.available}" style="width:100%">
<f:selectItems value="#{dtDeviceView.availableValues}" var="bool_value" itemLabel="#{bool_value}" itemValue="#{bool_value}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
I'm Using JSF 2.2 (Mojarra 2.3.5) And PrimeFaces 6.2.
How can I solve it?
[SOLVED]
I just needed
<style type="text/css">
.black-font {
color: black;
}
</style>
in the head of my xhtml file and styleClass="#{'black-font'}" in my h:selectOneMenu tag:
<h:selectOneMenu value="#{device.available}" style="width:100%" styleClass="#{'black-font'}">
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 am using Primefaces 5.1 in my page I use dataTable inside another dataTable.In add button press add new bean for salList and check salList not null to rendered header column.But sal column not rendered.
<p:dataTable id="mainTable" value="#{employee.employeeList}" var="emp" ..>
<p:columnGroup type="header">
<p:row >
<p:column headerText="Name"/>
</p:column headerText="value" **rendered="#{emp.salList ne null and not empty emp.salList}**/>
....
<p:column>
<f:facet name="header"><p:commandButton value="add button" action="#{employee.addButton}" update="mainTable"/>
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
<p:column>
<p:dataTable value="#{emp.salList}" var="sp">
<p:column></p:column>
..
</p:dataTable>
</p:column>
</p:dataTable>
My doubt is when I press add button to add new list salList bean and it add new bean and show component in inside dataTable.But in header column salary column is not rendered i.e header column not updated it will not rendered the specify header column.
I have primefaces datatable and i want to update specific column or entire row on cell edit. Value in edited cell determines value in other column in the same row.
I tried to update component from onCellEdit method but no success:
String targetTypeColumn = ((DataTable)event.getSource()).getClientId(FacesContext.getCurrentInstance()) +
":" + event.getRowIndex() + ":editor";
RequestContext.getCurrentInstance().update(targetTypeColumn);
Column have cell editor:
<p:column id="tgtType" styleClass="mapDetsTblColTypeTgt" headerText="Target Type">
<p:cellEditor id="editor" rendered="...">
<f:facet name="output">
<h:outputText value="..." />
</f:facet>
<f:facet name="input">
<p:inputText value="..." styleClass="mapDetsTblInput" onselect="this.value=this.value" />
</f:facet>
</p:cellEditor>
<h:outputText value="..." rendered="!..."/>
</p:column>
Any ideas?
I don't want to update whole datatable because this is waste of time.
Edit:
I tried to update datatable during on cell edit
<p:dataTable id="mapperDetailsTable" styleClass="mapperDetailsTable" widgetVar="mapperDetailsTable"
..... >
<p:ajax event="cellEdit" listener="#{bean.onCellEdit}" update=":mapperDetailsForm:growlMapper mapperDetailsTable"
oncomplete="handleCellEdit(args);" />
......
but no effect. Next cell not updated. Is it correct what i wrote? I'm using autoComplete in edited cell so i don't have update attribute.
<p:cellEditor rendered="#{guiUtils.isEditable(mapperCtrl, fieldMapping)}">
<f:facet name="output">
<h:outputText value="#{fieldMapping.fieldNameTgt}"/>
</f:facet>
<f:facet name="input">
<p:autoComplete value="#{fieldMapping.fieldNameTgt}" completeMethod="#{mapperCtrl.dmUtils.completeTargetFields}" >
<p:ajax event="itemSelect" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/>
<p:ajax event="change" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/>
</p:autoComplete>
</f:facet>
</p:cellEditor>
Edit2:
I checked and value is updated on the correct element in the list.
When i used solution from this thread(reload datatable): Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">
everything is ok. So value is updated correctly but how to refresh row or cell only?
Edid 3:
I found out that i can update cell using commandButton
<p:column>
.....
<p:commandButton value="updateTgtRow" id="updateTgtRow" process="#this" ajax="true" immediate="true" update="outputType inputType"/>
</p:column>
After click in button cell is updated without reload table. But how to call click on that button after cell edit? When i added oncomplete, cell edit don't work. Cells are read only. Any idea?
<p:ajax event="cellEdit" listener="#{mapperCtrl.onCellEdit}"
process="#this" oncomplete="#(updateTgtRow).click()"/>
I solve my problem using p:commandButton component
In cell i added
<p:commandButton style="display: none" value="updateTgtRow" id="updateTgtRow" process="#this" ajax="true" immediate="true" update="outputTgtType inputTgtType"/>
It updates fields from other cells (outputTgtType and inputTgtType). In bean i call click on that button
String componentId = ((DataTable) event.getSource()).getClientId(FacesContext.getCurrentInstance()) + ":"
+ event.getRowIndex() + ":updateTgtRow";
RequestContext.getCurrentInstance().execute("document.getElementById('" + componentId + "').click()");
It looks like hack but it works. This solution update specific cells in currently edited row.
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 need create an primefaces Datatable with InputText into cells and get de information edited in the inputText
I create the datatable with the next code:
<p:dataTable value="#{busquedaArticulo.attr}" var="rowName" styleClass="table table-bordered table-stripped" rowIndexVar="rowIdx">
<p:column headerText="" styleClass="ui-widget-header">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns value="#{busquedaArticulo.siz}" var="columnName" headerText="#{columnName}" columnIndexVar="colIdx">
<h:inputText id="siz" value="#" styleClass="form-control" />
</p:columns>
</p:dataTable>
I suggest you to use editable row. you can show value of each entry if it has been set by user or has a default value or leave it empty or "not set" if it's not set.
user can click on pencil icon and edit value of each row. once row has been edited you can get new value in your backing bean.
look at this: http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
hope it was useful :)