I need to display the dynamic list a value as header text in data table but the value is getting repeated for each row. I need the header to be displayed only once at top and input text also only once should come in row-wise where each row has row edit and save option.This is my code.
<p:dataTable id="examMarksVie"
var="internal"
editable="true"
rowIndexVar="rowindex"
rowKey="#{internal.internalMarkId}"
style="width:90%;margin-left:70px;margin-top:5%"
value {exam.internalMarkList}">
<p:ajax event="rowEdit" listener="#{exam.doSaveInternalMark}" update="examMarksVie"/>
<p:column headerText="#{message['label.studentManagement.transferCertificate.studentName']}">
<h:outputText value="#{internal.studentDetails.studentApplicationID.firstName} #{internal.studentDetails.studentApplicationID.middleName} #{internal.studentDetails.studentApplicationID.lastName}" />
</p:column>
<p:column
headerText="#{message['label.exam.internal.weightage']}"
style="width:265px">
<p:dataTable var="al" value="#{internal.interALlocMarkList}">
<p:columns value="#{internal.interALlocMarkList}" var="id"
columnIndexVar="index"
headerText="#{internal.interALlocMarkList[index].internalAllocId.titleName} out of #{internal.interALlocMarkList[index].internalAllocId.titleName}">
<p:inputText value="#{al.allocMark}" />
</p:columns>
</p:dataTable>
</p:column>
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 have this datatable:
<p:dataTable id="necesidades"
value="#{registrarAccionDosBean.accionDos.necesidadesConTema}"
rendered="#{not empty registrarAccionDosBean.accionDos.necesidadesConTema}"
var="necesidad"
rowKey="#{necesidad.idNecesidad}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:rowExpansion>
<h:panelGroup id="grupoTema">
<h:panelGroup id="edicion" rendered="#{necesidad.tema.idTema ne null}">
<p:row>
<p:column >
<h:outputLabel value="#{etiq.lbl_comunes_requerido} #{etiq.etiqueta_checkbox_transparenciasFocalizadas}" styleClass="textoAcciones"/>
</p:column>
<p:column >
<!-- Nested data table -->
<p:dataTable id="transparenciasInplace"
var="transparencias"
value="#{registrarAccionDosBean.transparenciasFocalizadas}"
selection="#{necesidad.tema.transparenciasFocalizadas}"
rowKey="#{transparencias.idTf}">
<f:facet name="header">
Objetives
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column>
<h:outputLabel value="#{transparencias.descripcion}" styleClass="textoAccionesSmall"/>
</p:column>
</p:dataTable>
</p:column>
</p:row>
</h:panelGroup>
</h:panelGroup>
</p:rowExpansion>
</p:dataTable>
I have n rows collapsed with information inside of each of them, this information was persisted in different times and days, so I need to save some information plus the n rows as a whole, the problem is that the rows are collapsed when is show on screen and I want to be in that way because a can have a lot rows on screen and if I show them expanded it will be hard to read, but when I send it through a command button the table inside my collapsed row are setting null, I need to expand each of them in order to properly send all the information.
So I want to send the information collapsed but in some way force to fetch the information inside of each of them
I am getting the information from the database right, because there I just fetch my query and get the information right, so my problem is on my jsf page I think
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 need to create a datatable in jsf using primefaces where i need to have one row in which one column contains static data with one button.When i will click on this button then the other columns(within the same row) should display some input text fields with label and data should be populated from database.It means if there are two records coming, then the column in that row should get spanned into the number of rows according to number of records.It means one column will be static and other column in that row should get dynamically spanned and some components should be added in the column within the row.please help me how to do this?
Hi somewhere down the line I found some sample code for dynamically creating rows, further u can nest it as required.
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 2" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field2}" />
</p:column>
<f:facet name="footer">
<p:commandButton value="New" action="#{myBean.prepareForInsert}" update=":myForm:myPanel"/>
</f:facet>
</p:dataTable>
<h:panelGrid id="myPanel" columns="2" >
<h:outputLabel value="Field 1"/>
<p:inputText id="fld1" value="#{myBean.newRec.field1}" />
<h:outputLabel value="Field 2"/>
<p:inputText id="fld2" value="#{myBean.newRec.field2}" />
<p:commandButton action="#{myBean.createAction}" value="Submit" update="myGrowl myTable" />
</h:panelGrid>
When New button is clicked, create an emty instance of newRec in prepareForInsert routine of myBean. So that myPanel is filled with blanks in the fields. On Submit, add the newRec to list_Recs and the new record is diplayed in the data table because of the update on myTable. Hope this helps.