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
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 two levels of nested datatables in the form of
<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 am able to retrieve the information and presented on screen properly, but when I send to submit through a command button, all the information is sending but the values of the innermost datatable(the one which id is "transparenciasInplace") are not sending in the right way, in the backing bean I getting the following information which is incorrect
The way I receive the values in the bean
Subject1 ---ObjetivesE,ObjetiveF
Subject2 ---null
Subject3 ---null
The way that I expect and I see on screen
Subject1 ---ObjetivesA (1 object subject and 1 object Objective)
Subject2 ---ObjectiveB,ObjectiveC,ObjectiveD (1 object subject and 3 objects Objective)
Subject3 ---ObjetivesE,ObjetiveF (1 object subject and 2 objects Objective)
The code of my command button
<p:commandButton process="#form" icon="ui-icon ui-icon-disk" id="btnsave"
value="Save" actionListener="#registrarAccionDosBean.guardar}"
widgetVar="btnguardar"
onclick="setTimeout('btnguardar.disable()', 10);" title="#{etiq.btn_guardar}" update="content"/>
I don't know why in the subject1 I am getting the value of the Subject3 and the values of the Subject2 and Subject3 are setting to null
So basically I need to change my datatable to a p:selectManyCheckbox. That's because in the datatable I can not differentiate my source form my target in this particular case, because when I write
<p:dataTable id="transparenciasInplace"
var="transparencias"
value="#{registrarAccionDosBean.transparenciasFocalizadas}"
selection="#{necesidad.tema.transparenciasFocalizadas}"
rowKey="#{transparencias.idTf}">
.
.
The value that is sending is my source and this is shared between the n rows and I think there was the problem, but if we use something like this
<p:selectManyCheckbox id="transparenciasInplace" value="#{necesidad.tema.transparenciasFocalizadas}" layout="pageDirection" columns="1" converter="transparenciaConverter" style="table-layout: auto;font-weight: bold; text-align: justify;font-size :15px">
<f:selectItems value="#{registrarAccionDosBean.transparenciasFocalizadas}" var="transparenciaC" itemLabel="#{transparenciaC.descripcion}" itemValue="#{transparenciaC}" />
</p:selectManyCheckbox>
I clearly separete my source
<f:selectItems value="#{registrarAccionDosBean.transparenciasFocalizadas}" var="transparenciaC" itemLabel="#{transparenciaC.descripcion}" itemValue="#{transparenciaC}" />
from the target (the value that I want to send)
<p:selectManyCheckbox id="transparenciasInplace" value="#{necesidad.tema.transparenciasFocalizadas}" layout="pageDirection" columns="1" converter="transparenciaConverter" style="table-layout: auto;font-weight: bold; text-align: justify;font-size :15px">
This question already has answers here:
Input field in <h:dataTable> always receives value of last item in list
(3 answers)
Closed 7 years ago.
I'm using h selectOneMenu in a datatable and when user press the Set Fixture button i'm saving the value changed in the dropdown, for now i'm using a String variable to get the selected value but the issue is it have the selected value from only the last dropdown. My question is how to get list of all the dropdowns ?
<h:form id="chooseAlmFixtureForm">
<p:panel style="width:80%" header="Set Fixture for Alarms">
<p:dataTable id="tbsetFixtureTable" value="#{setAlmFixtures.alarms}" var="alarmvar" dynamic="false">
<p:column>
<p:commandLink value="View" update=":viewUnknownAlarm" immediate="true" oncomplete="viewDialog.show()">
<f:setPropertyActionListener target="#{currentalarms.viewAlarm}" value="#{alarmvar}"/>
</p:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Alarm Time"/>
</f:facet>
<h:outputText value="#{alarmvar.recvTime}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Alarm Type"/>
</f:facet>
<h:outputText value="#{alarmvar.alarmType}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Controller Name"/>
</f:facet>
<h:outputText value="#{alarmvar.controllerName}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Controller Type"/>
</f:facet>
<h:outputText value="#{alarmvar.controllerType}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Choose Fixture"/>
</f:facet>
<h:selectOneMenu id="selectAlarmSite" value="#{setAlmFixtures.selectedFixture}">
<f:selectItems value="#{setAlmFixtures.fixtures}" />
</h:selectOneMenu>
</p:column>
</p:dataTable>
<p:commandButton value="Set Fixtures" actionListener="#{setAlmFixtures.setAlarmsFixtures}" action="#{horizontalmenu.actionCallAlarmsPage}" styleClass="dialogButton"/>
</td><td>
<p:commandButton value="Cancel" actionListener="#{setAlmFixtures.releaseAlarms}" action="#{horizontalmenu.actionCallAlarmsPage}" styleClass="dialogButton"/>
</p:panel>
</h:form>
Currently, your dropdown-value refers to a single variable in your bean (which seems to be selectedFixture of class SetAlmFixtures). How would a single variable represent a state (value) for multiple row (here: alarms)?
You need to link the selected value to the row (alarm) it refers to. To do so, you have several options, two approaches following:
Use the variable of your alarm-object, just the same way as you used them as outputvalues inside the other columns. This way, the alarm's fixture is set directly on value (form) processing. Currently, both of your buttons submit the form (type="submit" is default), depending on what your actionlisteners do, you might consider changing the Cancel-button's type to button.
Map the fixtures and alarms. You could use something like Map<Long, Fixture> fixturemap; mapping alarm-id's to their selected fixture, assuming all alarms have a non-null id. The map's value can be referred by setAlmFixtures.fixturemap['alarmvar.id']. Make sure you provide a getter for the map and the id. Also, you need to initialize the map with the initial fixture values for each alarm.
I am using a datagrid to display row dynamically from panelgrid. It works fine except the layout is not good. It displays the following row side by side instead on new line. Anyone know how to display a new row on a new line ? I tried to use <br/> tag, but it's not working.
<p:dataGrid style="border:10px;" value="#{TestComponent.list}" var="x">
<p:panelGrid style="width:1250px;">
<p:row>
<p:column colspan="1">1.1</p:column>
<p:column colspan="2">
<h:outputText value="#{x.Description}" />
</p:column>
<p:column colspan="4">
<h:inputTextarea rows="10" cols="40"
value="#{x.Justification}" required="false" label="Justification" />
</p:column>
</p:row>
</p:panelGrid>
<br/>
</p:dataGrid>
If you want to create a new line, you must create a new <p:row> tag.
Example:
<p:panelGrid>
<p:row>
<p:column>Row 1/Column 1</p:column>
<p:column>Row 1/Column 2</p:column>
</p:row>
<p:row>
<p:column>Row 2/Column 1</p:column>
<p:column>Row 2/Column 2</p:column>
</p:row>
</p:panelGrid>
Manage to do it. It have to specify the number of columns in my datagrid.
It's a combination of things done wrong. The datagrid by itself puts childeren next to eachother in colums (default = 3 , see the docs http://www.primefaces.org/showcase/ui/data/dataGrid.xhtml). So 3 panelgrids next to eachother (so three rows next to eachother). Setting the columns to 1 will makr it work. Additionally, a colspan does nothing if there are not multiple rows like in the example #pellizon mentiones.
i have a problem with p:table alignment below is the picture(picture one) when first time load this p:table using p:commandbutton if i click on scenario Two tab and click back to scenario One tab i get right alignment of table see picture two.
picture one
picture two
this is the button when i click first time, table loads
<p:commandButton id="isFinancialYearSubmitId" value="submit" update="panelGridId scenarioTabViewId:budgetAnalysisDataTableId scenarioTabViewId:selectColumnId scenarioTabViewId:isApprovedBooleanId_checkBox " action="#{budgetAnalysisAction.isFinancialYearOpened}" oncomplete="handleComplete(xhr, status, args); isFinancialYearOpenedOnComplete('analysisTheBudgetForm');"/>
and this is table
<p:dataTable id="budgetAnalysisDataTableId"
rowIndexVar="index" editable="true"
resizableColumns="true"
value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}"
var="budgetScenarioHescoProposalList"
scrollWidth="800" scrollHeight="250" scrollable="true"
>
<p:ajax event="rowEdit" process=":analysisTheBudgetForm:scenarioTabViewId:scenarioOneId_tab :analysisTheBudgetForm:scenarioTabViewId:isApprovedBooleanId_checkBox :analysisTheBudgetForm:scenarioTabViewId:budgetAnalysisDataTableId" listener="#{budgetAnalysisAction.analysisTheBudgetRowEditOnAjax}" />
<p:column headerText="Edit" width="20">
<p:rowEditor />
</p:column>
<p:column headerText="Sub Head Of Accounts" width="150">
<h:outputText value="#{index}" />
<h:outputText value="#{budgetScenarioHescoProposalList.budgetSubHeadOfAccountsBean.subHeadOfAccountNameBean}" />
</p:column>
<p:column width="60">
// 11 other columns with same width(width="60") but different data.
</p:column>
this is an inspect element of picture one
this is an inspect element of picture two