Replace code for rich:suggestionbox with rich:autocomplete - jsf-2

I am working on richfaces migration from 3.3 to 4.2. I am stuck with the replacement of rich:suggestionbox tag with rich:autocomplete tag.
Richfaces 3.3 code,
<rich:suggestionbox for="officerSrch" minChars="2" nothingLabel="No managers found"
suggestionAction="#{batchProcessor.searchOfficers}" fetchValue=""
var="o" eventsQueue="officerQueue"
height="270" width="480">
<a4j:support event="onselect" action="#{accountLookupAction.add(o)}" reRender="params"/>
<h:column>
<f:facet name="header">
<h:outputText value="Employee ID"/>
</f:facet>
<h:outputText value="#{o.employeeId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="First Name"/>
</f:facet>
<h:outputText value="#{o.firstName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name"/>
</f:facet>
<h:outputText value="#{o.lastName}"/>
</h:column>
</rich:suggestionbox>
Can anyone please guide me to convert the above code to richfaces 4?

Richfaces 4.2.0 Final version rich:autocomplete is not working properly. As per the Jboss developer suggestion I have upgraded the version from 4.2.0.Final to 4.5.13.Final.
You can refer the following link, https://developer.jboss.org/thread/267610
I have found the solution to this issue. It will be help to resolve someone facing the same issue. Here is y solution,
<rich:autocomplete mode="cachedAjax" minChars="2" autofill="false" selectFirst="false"
autocompleteMethod="#{batchProcessor.searchOfficers}" id="officerSrch" layout="table" fetchValue="#{o.employeeId}"
value="#{accountLookupAction.empId}" var="o" eventsQueue="officerQueue" height="270" width="480">
<h:column>
<f:facet name="header">
<h:outputText value="Employee ID"/>
</f:facet>
<h:outputText value="#{o.employeeId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="First Name"/>
</f:facet>
<h:outputText value="#{o.firstName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name"/>
</f:facet>
<h:outputText value="#{o.lastName}"/>
</h:column>
<a4j:ajax event="selectitem" listener="#{accountLookupAction.addOfficer()}" render="params"/>
</rich:autocomplete>
Header value is not supported in rich:aotocomplete.
fetchValue attribute cannot be empty you should assign the value that you
wanted to use in the action class.
You cannot assign or pass any object through rich:autocomplete. It is currently supports only String value.

Related

Primefaces dataExporter footer issue for PDF

I have an issue with primefaces dataExporter not showing the footer of the dataTable when exporting to PDF. the header is exported but not the footer. it works fine with excel.
let's assume this is my dataTable
<p:dataTable id="tbl" var="product" value="#{bean.productList}">
<p:column>
<f:facet name="header">
<h:outputText value="Product" />
</f:facet>
<h:outputText value="#{product.name}" />
<f:facet name="footer">
<h:outputText value="Total" />
</f:facet>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Price" />
</f:facet>
<h:outputText value="#{product.price}" />
<f:facet name="footer">
<h:outputText value="#{bean.totalPrice}" />
</f:facet>
</p:column>
</p:dataTable>
<h:commandLink>
<p:graphicImage name="/demo/images/pdf.png" />
<p:dataExporter type="pdf" target="tbl" fileName="products" />
</h:commandLink>
when i export to PDF i get all my data fine except for the footer of the dataTable which contain the Total Price for the products.
What am i doing wrong ?
I'm using jsf 2.2 and primefaces 5.0

rich:dataTable columnClasses attribute issue

Version :
RichFaces 4.3.5
Apache MyFaces 2.1
Issue :
We are migrating from JSF 1.2 to JSF2.
As shown in below code , rich:dataTable uses columnClasses attribute to style columns.
The issue is columnClasses are not getting applied repetitively .
That is , if there are four columns , we need to specify four columnClasses attribute values separately like columnClasses=column1,column1,column1,column1.
This is really annoying since I need to use same columnClass for all columns.
I tried using spaces for columnClasses like columnClasses=column1 column1 , but no success.
Has anybody faces same issue ? Is there any workaround for this apart from specifying columnClasses manually ?
Code :
<rich:dataTable id="userList" styleClass="style1" headerClass="header1" rowClasses="table_evenRow,table_oddRow"
columnClasses="column1,column1,column1,column1" value="#{bean.userList}" var="user">
<f:facet name="header">
<rich:columnGroup columnClasses="table_header">
<h:column>
<h:outputText value="First Name" />
</h:column>
<h:column>
<h:outputText value="Last Name" />
</h:column>
<h:column>
<h:outputText value="Email" />
</h:column>
<h:column>
<h:outputText value="Phone" />
</h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{user.firstName}" />
</h:column>
<h:column>
<h:outputText value="#{user.lastName}" />
</h:column>
<h:column>
<h:outputText value="#{user.email}" />
</h:column>
<h:column>
<h:outputText value="#{user.phoneNum}" />
</h:column>
</rich:dataTable>
I had the same issue and as Vasil Lukach mentioned in a comment, columnClasses="right,left,"... only adds a css class to the td elements in the dom-tree.
e.g.:
<td id="form:table:0:j_idt36" class="rf-dt-c right">2</td>
In order to have an effect some css is required:
.left {
text-align: left;
}
.right {
text-align: right;
}

Primefaces dataTable sortBy a Date property

I'm using a p:dataTable to display a list of objects and I would like to order them by their Date property in a descending manner here is the code:
<h:form id="receivablesForm">
<p:dataTable id="receivablesTable" value="#{receivableManager.overdueReceivables}" var="receivable" rows="18" emptyMessage="#{msg['warning.noData']}" style="width: 585px;" sortBy="#{receivable.dueDate}" sortOrder="descending">
<p:column sortBy="#{receivable.invoice.number}" styleClass="fixedSizeColumnSmall">
<f:facet name="header">
<h:outputText value="#{msg['label.number']}" />
</f:facet>
<h:outputText value="#{receivable.invoice.number}-#{receivable.number}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg['label.clientName']}" />
</f:facet>
<h:outputText value="#{receivable.invoice.client.person.name}" />
</p:column>
<p:column styleClass="fixedSizeColumn">
<f:facet name="header">
<h:outputText value="#{msg['label.dueDate']}" />
</f:facet>
<h:outputText value="#{receivable.dueDate}" style="#{receivableManager.isOverdue(receivable) ? 'color: red' : ''}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg['label.amount']}" />
</f:facet>
<h:outputText value="#{receivable.amount}">
<f:convertNumber type="currency" locale="pt_br" />
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
However the objects are not being ordered at all. Is it possible to order by a Date property in a descending manner using the sortBy and sortOrder properties?

Wrong styling of p:dataTable with f:facet name="header"

I am showing data in a <p:dataTable>, but it shows like this
The view markup is straightforward:
<h:form>
<p:dataTable id="campaignSummaryTable" var="mout" value="#{campaignSummarySearchRes.summaryList}" height="500" scrollable="true" >
<p:column>
<f:facet name="header"><h:outputText value="Campaign Code"/></f:facet>
<h:outputText value="#{mout.shortCode}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Message"/></f:facet>
<h:outputText value="#{mout.message}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 1"/></f:facet>
<h:outputText value="#{mout.option1}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 2"/></f:facet>
<h:outputText value="#{mout.option2}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 3"/></f:facet>
<h:outputText value="#{mout.option3}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 4"/></f:facet>
<h:outputText value="#{mout.option4}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Other"/></f:facet>
<h:outputText value="#{mout.other}"/>
</p:column>
</p:dataTable>
</h:form>
How I can solve this issue? The header and the content should have the same column width.
Add a style="width:125px" attribute to your columns so they look like this one:
<p:column headerText="Campaign Code" style="width:125px">
<h:outputText value="#{mout.shortCode}" />
</p:column>
I also put the header as an attribute of column. I dont know if thats neccessary, but it looks better.
See also PF Showcase
What version do you use?
You do not have to put a facet in a column; each column has a headerText attribute. Look at this: http://www.primefaces.org/showcase-labs/ui/datatableComplex.jsf.

filtering a rich:datatable with a rich:datascroller on richfaces 4

I am using richfaces 4, and i have a rich:datatable with a rich:datascroller and a column with a filter following the examples at the richfaces 4 showcase, but here's the thing, once i filter the table and the datascroller updates(ie. if at first the datascrolloer has 10 pages and after the filter have 2 pages) if I click on the next page or any of the boundary controls it suppose to go to the next page of the filtered table but instead the table resets to its original state(with out the filter expression)
here is my code:
<rich:dataTable id="mytbl" value="#{MyBean.mylist}" rows="10"
var="emp"
reRender="ds"
iterationStatusVar="it">
<f:facet name="noData">
no data found
</f:facet>
<rich:column filterValue="#{MyBean.id_filter}"
filterExpression="#{fn:containsIgnoreCase(emp.id,MyBean.id_filter)}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="id"/>
<h:inputText value="#{MyBean.id_filter}">
<a4j:ajax event="change" render="mytbl" execute="#this"
onbegin="#{rich:component('wait_popup')}.show()"
oncomplete="#{rich:component('wait_popup')}.hide()"/>
</h:inputText>
</h:panelGroup>
</f:facet>
<h:outputText value="#{emp.id}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="value" />
</f:facet>
<h:outputText value="#{emp.value}">
<f:convertNumber pattern="$#,###.00"/>
</h:outputText>
</rich:column>
<f:facet name="footer">
<rich:dataScroller maxPages="10" id="ds" render="#this" />
</f:facet>
</rich:dataTable>
Probably MyBean was not view scoped.

Resources