rich:dataTable columnClasses attribute issue - jsf-2

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;
}

Related

Replace code for rich:suggestionbox with rich:autocomplete

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.

retain data in text box while adding/deleting new row

I want to retain data in text box while adding/deleting other row.I am using nested datatable. If I click on delete button it refreshed entire datatable, so user lost the partially filled form data.
<h:commandButton id="addBtn" value="Add Value">
<f:ajax listener="#{relationBean.addValue}"
render="datatableIterator" event="click" />
</h:commandButton>
<h:dataTable id="datatableIterator"
value="#{relationBean.datatables}" var="datatable">
<h:column>
<h:dataTable id="relationIterator"
value="#{datatable}" var="item">
<h:column>
<f:facet name="header"> Relation Type Name</f:facet>
<h:outputText value="#{item.relationType}" />
</h:column>
<h:column>
<f:facet name="header">language</f:facet>
<h:outputText value="#{item.languageName}" />
</h:column>
<h:column>
<f:facet name="header"> Value</f:facet>
<h:inputText value="#{item.relationForm}" />
</h:column>
</h:dataTable>
</h:column>
<h:column>
<p:commandLink action="#{relationBean.deleteDataTable}"
immediate="true" update="#form" process="#this" >
<h:graphicImage value="../images/delete.png" />
<f:setPropertyActionListener
target="#{relationBean.deleteId}" value="#{datatable}" />
</p:commandLink>
</h:column>
</h:dataTable>
I got the resolution.
Its only one line change.what I was doing that I was adding the datata before populating the form, so whenever I click on delete button it clears the form. so I added the data after populating the form like this.
getDatatables().add(getRelationDTOList());
before it was
datatables.add(getRelationDTOList());
and included execute="#form" in xhtml add button.

Title not appearing when hovering over the column of a datatable

For code similar to that below, the title does not appear when the cursor hovers over a column header. Any ideas?
<h:column title="COLUMN 1">
<f:facet name="header" >COL 1</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"/>
</h:column>
<h:column title="COLUMN 2">
<f:facet name="header" >COL 2</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al"/>
</h:column>
The <h:column> tag has no HTML 4.0 pass-through attributes as JSF generates these as nothing but <td> elements. And in HTML, tables consist of <td> elements within rows and columns are implicitly defined within the rows.
So it is liking specifying the title attribute for each particular <td> element of each and every row.
<table border="1">
<tr>
<td title="first">Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td title="first">Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
So there is nothing like specifying an overall title for the column in HTML, you can have a title for <table> tag which is nothing but <h:dataTable>.
Or you can have title on individual data cells by adding title to your components inside that column like this:
<h:column>
<f:facet name="header" >COL 1</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al" title="COLUMN 1"/>
</h:column>
<h:column>
<f:facet name="header" >COL 2</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al" title="COLUMN 2"/>
</h:column>
which generates a <span> containing the value of the outputText with the title attribute.
If you use Primefaces, you can use similar code
<p:column>
<f:facet name="header">
<h:outputText value="TYPE" title="LINK-TYPE (DIRECT,TDR,TLGA)"/>
</f:facet>
<h:outputText escape="false" value="#{test.getLinkType()}"/>
</p:column>
I think that the solution to your problem is to define <f:facet> as you done in your example AND to put <h:outputText> in <f:facet> !
Using your example, you will obtain following code
<h:column>
<f:facet name="header">
<h:outputText value="COL 1" title="COLUMN 1"/>
</f:facet>
<h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"/>
</h:column>
<h:column title="COLUMN 2">
<f:facet name="header">
<h:outputText value="COL 2" title="COLUMN 2"/>
</f:facet>
<h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al"/>
</h:column>

Data duplicated in datatable

I have a problem with a dataTable component using Tomahawk.
I want to make a datatable with subcolumns in some columns. Something like that:
This table only have 2 rows but its duplicated. Here is the code:
<t:dataTable id="tabla1" value="#{userControl.mc64cljobs_encolados}" var="clh">
<t:column id="col1" >
<f:facet name="header" >
<h:outputText styleClass="leftColumn" value="Options"/>
</f:facet>
<t:dataTable id="tabla2" value="#{userControl.mc64cljobs_encolados}" var="clh1">
<t:column id="col11">
<f:facet name="header" >
<h:outputText styleClass="leftColumn" value="Delete Work"/>
</f:facet>
<center>
<h:form>
<h:commandLink actionListener="#{userControl.eliminaTrabajo(clh1.codigo, 'multicore64clustalwtrabajos', userControl.user, userControl.password, clh1.fileSequences, '')}" value="Delete" />
</h:form>
</center>
</t:column>
<t:column id="col12">
<f:facet name="header" >
File Sequence Fasta
</f:facet>
<center>
<h:form>
<h:commandLink target="popupWindow" action="popupWindow" actionListener="#{userControl.setOpenFile(clh1.fileSequences)}" value="FILE 1" />
</h:form>
</center>
</t:column>
</t:dataTable>
</t:column>
<t:column id="col2" >
<f:facet name="header">
Pairwise alignment parameters
</f:facet>
<t:dataTable id="tabla3" value="#{userControl.mc64cljobs_encolados}" var="clh2" >
<t:column id="col21" >
<f:facet name="header" >
Gap Open Cost
</f:facet>
#{clh2.costeOpenGap}
</t:column>
<t:column id="col22">
<f:facet name="header">
Gap Extend Cost
</f:facet>
#{clh2.costeExtendGap}
</t:column>
<t:column id="col23">
<f:facet name="header" >
Cost Matrix
</f:facet>
#{clh2.scoringMatrix}
</t:column>
<t:column id="col24">
<f:facet name="header">
Cost Match/Replace
</f:facet>
#{clh2.costeMatchReplace}
</t:column>
</t:dataTable>
</t:column>
</h:dataTable>
What is my error in that code? What am I doing wrong?
Thank you so much!
Check this :
Why JSF calls getters multiple times
The getter can be called more than one times in jsf lifecycle

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