How to filter date range with primefaces calendar? - jsf

I filter columns in data table with prime faces dataTable showcase example
<p:column id="logStatus" filterBy="#{log.status}" headerText="status">
<h:outputText value="#{log.status}" />
</p:column>
<p:column filterBy="#{log.mbr}" headerText="mbr">
<h:outputText value="#{log.mbr}" />
</p:column>
Everything works fine when the key is released filters are sent to my DAO where I do some logic.
I don't know how to implement this with <p:calendar>
I want to pick dates from calendar and sand it to DAO in the same way as it works with filters I provided above
A column with calendar, I need two calendars in one column
<p:column filterBy="#{log.datumOd}" headerText="datumupisa od">
<f:facet name="filter">
<p:calendar id="datumOd" pattern="dd/MM/yyyy">
<p:ajax event="dateSelect" />
</p:calendar>
</f:facet>
<f:facet name="filter">
<p:calendar id="datumDo" pattern="dd/MM/yyyy">
<p:ajax event="dateSelect" />
</p:calendar>
</f:facet>
<h:outputText value="#{log.datumUpisa}" />
</p:column>
I need explanation how filterBy works? Should i use update, on complete and event ? I tried to use two columns and filterby dateFrom and dateTo, but events not working. It works if i pick dates and then filter by other filters ( from above ).
I will proivde more info and code if needed.

Related

How to block a single datatable cell in primefaces with blockUI

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>

groupRow attribute doesn't work correctly for some columns of p:dataTable

My p:dataTable has 3 columns:
<p:dataTable
id="producaoDataTable"
value="#{clienteMB.producaoList}"
var="producao">
<p:column
headerText="Especialidade"
groupRow="true">
<h:outputText value="#{producao.modalDesc()}" />
</p:column>
<p:column
headerText="Dente"
groupRow="true">
<h:outputText value="#{producao.dente}" />
</p:column>
<p:column
headerText="Procedimento"
groupRow="true">
<h:outputText value="#{producao.utDesc()}" />
</p:column>
</p:dataTable>
While groupRow works fine for the first p:column, that doesn't work for the second one and works partially for the third one:
Is there a way to solve that?
Possibly fixed in version 6.1.1:
Datatable Column groupRow Row Spans Incorrect Column If More Than One Column Marked as Grouped #2210
Unfortunately, that's not available for the community. The same fix will be in the upcoming 6.2 release.

Submit in a fetch mode collapsed rows

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

Primefaces datatable, update row oncelledit

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.

How to get multiple h:selectOneMenu values inside h:dataTable [duplicate]

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.

Resources