primefaces datatable filter between dates - date

i need to filter some fields between dates, but primefaces does not have support for date filtering yet.
i can do it with a function but im not sure how... here is some example i found:
<f:facet name="header">DateRange
<div>
<p:calendar id="from" value="#{bean.from}" styleClass="calendarFilter">
<p:ajax event="dateSelect" listener="#{ctrlr.filterDates()}" update="dataTableId"/>
</p:calendar>
<p:calendar id="to" value="#{bean.to}" styleClass="calendarFilter">
<p:ajax event="dateSelect" listener="#{ctrlr.filterDates()}" update="dataTableId"/>
</p:calendar>
</div>
</f:facet>
there is only the "view" code, id like to see how it would be the filtering function in my bean.
any example would be welcome :)
thanks.

There were I would keep the date fields in a different output panel and based on date select update the table on click of a filter button.
<h:outputText value="FROM" />
<p:calendar id="strtdt" showOn="button" title="Start Date" size="12" value="#{form.startDate}" navigator="true" showButtonPanel="true">
</p:calendar>
<h:outputText value="TO" />
<p:calendar id="enddt" showOn="button" title="End Date" size="12" value="#{form.endDate}"
navigator="true" showButtonPanel="true" >
</p:calendar>
<p:commandButton id="btnFilter" value="Filter" update="datatable" action="#{controller.update()}" ajax="true" />
In the Controller Class write the code to fetch the required data between the dates and update the table (or the list that loads the table).
Hope this helps.

Related

Primefaces v.5.3.5 confirm dialog render issue outside main h:form and inside main form is rendered but it is not working properly

I am using PF v.5.3.5 and JSF v.2.2.8. It is a frequent topic in SO. I noticed that there is a bug in PF v.5.3.5 documentation related to the appendTo attribute.
1st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is not rendered if it is placed inside of nested h:form.
2st approach
If I place this dialog outside of main h:form it is not rendered at all also if I add the global="true" attribute.
3st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is rendered if the nested h:form is removed.
<h:form>
...
<p:confirmDialog id="askSessionDialog1" widgetVar="askSessionDialog1" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<h:form>
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" action="#{treeData.save(false, true)}" icon="fa fa-check"
update="#(form)" type="button" />
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" action="#{treeData.setAskSessionDialogRendered(false)}"
icon="fa fa-close" onclick="PF('askSessionDialog1.hide()')" update="#(form)" type="reset" />
</h:form>
</p:confirmDialog>
...
</h:form>
BECKEND PART
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm askSessionDialog askTurnOffDialog askSessionDialog1 askTurnOffDialog1");
Thanks in advance for constructive posts and comments.
SOLVED
This is the best approach that works for me now.
<h:form>
...
<p:confirmDialog id="askSessionDialog" widgetVar="askSessionDialog" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<h:form>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" icon="fa fa-check" type="button" accesskey="o">
<p:ajax event="click" listener="#{treeData.save(false, true)}" oncomplete="PF('askSessionDialog').hide()"
update="#(form)" />
</p:commandButton>
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" icon="fa fa-close" type="reset" accesskey="c">
<p:ajax event="click" listener="#{treeData.setAskSessionDialogRendered(false)}"
onsuccess="PF('askSessionDialog').hide()" update="#(form)" />
</p:commandButton>
</h:form>
</p:confirmDialog>
...
</h:form>
BACKEND
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm");
SPACIAL THANKS TO: #YagamiLight
He helped me to kick off my solution.

Close Rich:modalPanel after save correctly

I have a form with a button that opens a Rich:modalPanel with another form inside and two buttons at bottom; Close and Save.
Close: executes onclick="#{rich:component('mp')}.hide() and hides the modalPanel.
Save: validates the fields of the forms shows an error if is not complete, if the form is correct saves in db. reset the form but not close the Rich:modalPanel.
I want to close the Rich:modalPanel only if the form is ok and saves but i cant do it. I tried with:
Inserting Javascript:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" onclick="#{rich:component('mp')}.hide()"/><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" oncomplete="#{rich:component('mp')}.hide()"/><br />
Using only RichFaces:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="onclick" />
</a4j:commandButton><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="oncomplete" />
</a4j:commandButton><br />
But this codes always closes (or hide) the modalPanel, not only if the save is complete. Is it another way to close this modalPanel only if the save is ok?.
The Error popup is:
<a4j:outputPanel ajaxRendered="true">
<h:messages id="error" styleClass="error"></h:messages>
</a4j:outputPanel>
<rich:modalPanel id="panel2" width="350" height="100" zindex="4000" showWhenRendered="${persona.hayErrores || persona.exito}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="${msg.error}" rendered="#{persona.hayErrores}"></h:outputText>
<h:outputText value="${msg.info}" rendered="#{persona.exito}"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/estilos/general/img/iconos/close.png" style="cursor:pointer" id="hidelink2"/>
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="#{persona.listaErrores}" rendered="#{persona.hayErrores}" styleClass="error"/>
<h:outputText value="#{msg.personaExito}" rendered="#{persona.exito}"/>
</a4j:outputPanel>
</rich:modalPanel>
Solved:
Just adding another rich:componentControl with conditions in popup message showing validation.
// If its wrong, only closes this popup
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.hayErrores}" />
// If its ok, closes this popup and 'mp' modalPanel
<rich:componentControl for="panel2,mp" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.exito}" />
You can use oncomplete attribute of a4j:commandButton, like
<a4j:commandButton action="#{persona.guardarAuxiliar}"
oncomplete="Richfaces.hideModalPanel('mp')"
value="#{msg.guardar}" reRender="personaForm" />
or with condition
oncomplete="if (#{!yourAction.hasErrors}) Richfaces.hideModalPanel('mp')"
Classical case with checking validation errors
oncomplete="if (#{facesContext.maximumSeverity == null}) {Richfaces.hideModalPanel('mp');}"

jsf inputText disabled and readonly properties in form

This question is a follow on from a previous question "InputText value null when disabled is true" however I can not add comments to it.
I am using jsf 2.2 and the both the disabled and readonly properties when set true, for the inputText and inputTextarea controls when included in a form is deleting data from the associated field in the database when the object is merged because the fields are null when the object is returned from the jsf page.
The purpose for setting these properties on a form's field is to display the data in the field but not allow the user to change it and save changes to other fields in the form.
What other way can this be achieved other than placing the fields outside of the form and complicate the page layout.
Graham
I solved the problem, it was caused by using #RequestScoped instead of #SessionScoped for my page controller bean.
What I was doing was using a edit link from a datatable passing the current product object to the doEditProduct method.
<h:dataTable id="viewProductsTable" value="#{productController.products}" var="_product"
styleClass="data-table" headerClass="table-header" rowClasses="table-row">
<h:column>
<f:facet name ="header">
<h:outputText value="Product Name" />
</f:facet>
<h:outputText value="#{_product.productName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Goal"/>
</f:facet>
<h:outputText value="#{_product.goal}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Details"/>
</f:facet>
<h:outputText value="#{_product.description}"/>
</h:column>
<h:column>
<h:form>
<h:commandLink value="Edit" action="#{productController.doEditProduct(_product)}"/>
</h:form>
</h:column>
</h:dataTable>
the productController.doEditProduct method then opened the edit page
public String doEditProduct(Product product) {
this.product = product;
return "edit-product.xhtml";
the edit page contained a simple edit form
<h:form id="addProductForm">
<h:panelGrid columns="2" columnClasses="top-alignment, top-alignment">
<h:outputLabel for="product-name" value="Product Name"/>
<h:outputText value="#{productController.product.productName}" id="product-name" />
<h:outputLabel for="goal" value="Goal" />
<h:inputTextarea value="#{productController.product.goal}" id="goal" rows="10" cols="100" />
<h:outputLabel for="details" value="Details" />
<h:inputTextarea value="#{productController.product.description}" id="details" rows="20" cols="100"/>
<f:facet name="footer">
<h:panelGroup style="padding-top: 15px; display: inline-block; float: right; white-space: nowrap">
<h:commandButton id="submit" value="Save" action="#{productController.updateProduct()}" class="button" />
<h:button id="Cancel" outcome="index.xhtml" value="Cancel" class="button"/>
</h:panelGroup>
</f:facet>
</h:panelGrid>
</h:form>
At this point the product data was displayed on the page. However when the save button was clicked and ran the update method
public String updateProduct() {
try {
log.log(Level.INFO, "Updating: {0}", product.getGoal());
productFacade.edit(product);
} catch (Exception e) {
log.log(Level.WARNING, e.toString());
String errorMessage = getRootErrorMessage(e);
FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_ERROR, errorMessage, "could not update product");
facesContext.addMessage(null, m);
return "";
}
return "index.xhtml";
Any field that had was disabled or readonly was set to null. In fact any non input field, anywhere on the page was set to null.
#RequestScope on the controller class meant that the class was being reinstantiated and thus the object stored in product was being assigned a new object in the PostConstruct method. The values in the editable fields were transferred to this new object and the non editable fields were set to null. Merging with the database meant that the data in the fields was deleted.
Using #SessionScoped means that the controller beans continues to exist across page requests. (I needed to remind myself about basic web page lifecycles)
Hope this helps anybody else that has this behaviour.
Graham

how to edit single row in rich:dataTable

i have to edit a row in a table using rich faces 4 and modal panel. I am new one so please tell me in details and i know to make a table in rich faces. i already searched so many things but not getting any fruitful
See answer for question "Richfaces: show details in popup [commandbutton, action and popupPanel]". It works in RichFaces 4.x with rowClick.
Or here is example with commandLink:
<a4j:commandLink action="#{actionBean.setupTransactionDetails}"
event="onclick" render="transactionDetails"
oncomplete="#{rich:component('transactionDetails')}.show()"
styleClass="rich-link">
<h:outputText value="#{res.transactionType}" />
<f:setPropertyActionListener value="#{res.transactionId}"
target="#{profile.transactionId}" />
</a4j:commandLink>
But I prefer updated version like this:
<a4j:jsFunction name="showDetail" action="#{actionBean.setupTransactionDetails}"
oncomplete="#{rich:component('transactionDetails')}.show();"
render="transactionDetails">
<a4j:param name="id" assignTo="#{profile.transactionId}"
converter="javax.faces.Long" />
</a4j:jsFunction>
<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
style="width: 100%" rowClasses="oddrow, evenrow"
value="#{profile.transactions}" var="res" sortMode="single">
<h:column width="110">
<f:facet name="header">
<h:outputText value="#{msg.transactionType}" />
</f:facet>
<a4j:commandLink onclick="showDetail('#{res.transactionId}');"
value="#{res.transactionType}" />
</h:column>
</rich:dataTable>
<rich:popupPanel id="transactionDetails" autosized="true"
style="max-height:600px;">
<!-- f:facet name="header" and f:facet name="controls" here -->
<h:form id="transactionDetailsForm">
<!-- some details here -->
</h:form>
</rich:popupPanel>
Profile backing bean
private Long transactionId; // + getter and setter
Action backing bean
public void setupTransactionDetails() {
Transaction txn = DAO.getInstance().get(Transaction.class, getProfile().getTransactionId());
transactionForm.setup(txn);
}
In case if you use EL 2.2 (or higher) you can call action bean method with parameter.

jboss rich dataTable wrong data

<rich:dataTable id="companyList" var="company"
value="#{companyList.resultList}"
rowClasses="odd-row, even-row"
rendered="#{not empty companyList.resultList}">
<rich:column width="25px" style="text-align:center;">
<f:facet name="header">#{messages.Edit}</f:facet>
<a4j:commandLink reRender="companyPanel"
oncomplete="#{rich:component('companyPanel')}.show()"
style="align: center;"> <f:setPropertyActionListener target=
"#{companyHome.instance}"
value="#{company}" />
<rich:toolTip value="#{messages.Edit}" />
</a4j:commandLink>
</rich:column>
<h:column>
<f:facet name="header">
#{messages.companyName}</f:facet>
#{company.companyName}
</h:column>
</rich:dataTable>
Hi I have some problem my rich datatable. All operation work normally , I search some data in dataTable ,I get true list in datatable but, If I try to update some data in column , wrong instance coming. Forexample , I choose banana which name is my data , but it brings before searching data not bring banana. I do not understand why. Sorry my english.
Not sure but, have you tried this
<f:setPropertyActionListener target="#{companyHome.id}" value="#{company.id}" />
instead of
<f:setPropertyActionListener target="#{companyHome.instance}" value="#{company}" />