I am using Richfaces 4.1 with myFaces 2.1.5. I have a data table with command links. When i load the page and click the links I instatly get viewExpiredException, no matter how much I wait before clicking, so session cannot expire on the server. I save the viewstate on server. What else can cause the loss of the viewstate?
Here is my code:
<h:form class="page_frame">
<rich:dataTable value="#{RunArchiveBean.archivedRuns}" var="run" id="run_table"
style="width: 900px; margin-top: 50px; margin-left: auto; margin-right: auto"
rowClasses="odd-row, even-row" styleClass="even_odd">
<f:facet name="header">
<h:outputText class="output_text_header" value="Run History" />
</f:facet>
<rich:column styleClass="run_archive_column" >
<f:facet name="header">Name<br/></f:facet>
<h:outputText value="#{run.name}"></h:outputText>
</rich:column>
<rich:column styleClass="run_archive_column" >
<f:facet name="header">Network<br/></f:facet>
<h:outputText value="#{run.network}"></h:outputText>
</rich:column>
<rich:column styleClass="run_archive_column" >
<f:facet name="header">Network Element<br/></f:facet>
<h:outputText value="#{run.networkElement}"></h:outputText>
</rich:column>
<rich:column styleClass="run_archive_column">
<f:facet name="header">Creation Date<br/></f:facet>
<h:outputText value="#{run.creationDate}"></h:outputText>
</rich:column>
<rich:column styleClass="run_archive_column">
<f:facet name="header">Run Date<br/></f:facet>
<h:outputText value="#{run.timestamp}"></h:outputText>
</rich:column>
<rich:column styleClass="run_archive_column_results" >
<f:facet name="header">Actions<br/></f:facet>
<a4j:commandLink execute="#this" action="alert('OK');" >
<h:graphicImage id="log_image" name="log.png" library="images" style="border:0" />
<rich:tooltip followMouse="true" target="log_image" value="Log" />
</a4j:commandLink>
</rich:column>
</rich:dataTable>
</h:form>
Looks like the server-side saving is the issue, though I can't say why - I've never encountered this error in newer versions of RichFaces. Switching to client-side saving should solve it.
For a more detailed explanation see this question.
Related
I use primefaces in order to build a datatable. The problem is that when i try to align the header whith the columns using a css rule (float: left) then the header row is duplicated.
The question is why this happens and how it can be solved.
Below i have the code and a snapshoot of the duplicated table header.
<h:form id="jobsForm" styleClass="jobsForm">
<p:dataTable id="jobsDataTable" var="jobs" scrollable="true"
value="#{jobsBean.getJobList()}" selectionMode="single"
widgetVar="jobs" rowKey="#{jobs.id}" styleClass="jobsTable">
<p:column id="jobId" styleClass="jobColumn" sortBy="#{jobs.id}">
<f:facet id="idFacet" name="header">
<h:outputText styleClass="jobText" id="idLabel" value="#{msg.JOB_ID}"/>
</f:facet>
<h:outputText id="id" value="#{jobs.id}" />
</p:column>
<p:column id="jobTitle" styleClass="jobColumn" sortBy="#{jobs.id}">
<f:facet id="titleFacet" name="header">
<h:outputText styleClass="jobText" id="titleLabel" value="#{msg.JOB_TITLE}"/>
</f:facet>
<h:outputText id="title" value="#{jobs.title}"/>
</p:column>
<p:column id="jobState" styleClass="jobColumn" sortBy="#{jobs.status}">
<f:facet id="titleFacet" name="header">
<h:outputText styleClass="jobText" id="statusLabel" value="#{msg.JOB_STATUS}"/>
</f:facet>
<h:outputText id="status" value="#{jobs.status}"/>
</p:column>
<p:column id="jobStartDate" styleClass="jobColumn" sortBy="#{jobs.start_date}">
<f:facet id="startFacet" name="header">
<h:outputText styleClass="jobText" id="startLabel" value="#{msg.JOB_START}"/>
</f:facet>
<h:outputText id="start" value="#{jobs.start_date}"/>
</p:column>
<p:column id="jobEndDate" styleClass="jobColumn" sortBy="#{jobs.start_date}">
<f:facet id="endFacet" name="header">
<h:outputText styleClass="jobText" id="endLabel" value="#{msg.JOB_END}"/>
</f:facet>
<h:outputText id="end" value="#{jobs.end_date}"/>
</p:column>
</p:dataTable>
</h:form>
Usually I don't get good results applying CSS classes directly on PrimeFaces components without using some selectors.
In this case you can write some CSS classes using selectors to override the default PrimeFaces behavior. Here's a example:
.ui-datatable thead tr th.align-left,
.ui-datatable tbody tr td.align-left {
text-align: left;
}
Now you can apply the align behavior directly on the wanted column (in this case, including 'align-left' on the job column styleClass):
<p:dataTable id="jobsDataTable"
var="jobs"
scrollable="true"
value="#{jobsBean.getJobList()}"
selectionMode="single"
widgetVar="jobs"
rowKey="#{jobs.id}"
styleClass="jobsTable">
<p:column id="jobId"
styleClass="jobColumn align-left"
sortBy="#{jobs.id}">
<f:facet id="idFacet" name="header">
<h:outputText styleClass="jobText" id="idLabel" value="#{msg.JOB_ID}"/>
</f:facet>
<h:outputText id="id" value="#{jobs.id}" />
</p:column>
</p:dataTable>
Lastly, make sure to remove the jobsForm class from the styleClass.
Suppose I have more than 10 rows of data to display in a richfaces extendedDataTable component and I want to show minimum 10 rows on initial load. And if the user wants to see the remaining rows, the user have to scroll down using the vertical scrollbar.
The code which I used is given below.
<rich:layout position="center" style="overflow:hidden">
<rich:layoutPanel position="center" >
<rich:extendedDataTable enableContextMenu="false"
style="vertical-align: top; horizontal-align: center; "
id="filtertable" value="#{dynamicBean.selectedData.filterDetList}"
var="bdata" height="#{reportDesignerBean.height}"
showWhenRendered="false" rowClasses="datatable-odd,datatable-even"
selectedClass="grid-selection-style"
noDataLabel="#{msg['bnp.common.extendedDataTable.noDataLabel']}">
<rich:column width="110px">
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.columnname']}" />
</f:facet>
<h:panelGrid id="filterName">
<h:outputText value="#{bdata.columnLabel}" />
</h:panelGrid>
</rich:column>
<rich:column width="110px" style="text-align:center;" >
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.isafilter']}" />
</f:facet>
<h:selectBooleanCheckbox id="checkOne" value="#{bdata.rowSelected}" >
<a4j:support event="onclick" ajaxSingle="true" limitToList="true">
<f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
</a4j:support>
</h:selectBooleanCheckbox>
</rich:column>
<rich:column width="320px">
<f:facet name="header"><h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.filtervalue']}" /></f:facet>
<h:panelGrid width="380px" id="filtervalue" columns="3">
${bdata.columnDataType}
<c:if test="#{bdata.columnDataType != 'Date'}">
<h:inputText value="#{bdata.value}" maxlength="150"
style="width:240px">
<a4j:support event="onchange" ajaxSingle="true" limitToList="true">
<f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
</a4j:support>
</h:inputText>
</c:if>
<c:if test="#{bdata.columnDataType == 'Date'}" >
<rich:calendar id="fixedDateValue" datePattern="#{loginBean.userPrefVO.preferredDateFmt}"
value="#{bdata.value}" buttonIcon="true" showWeeksBar="false"
weekDayLabelsShort="Su,Mo,Tu,We,Th,Fr,Sa"
oninputfocus="#{rich:component('fixedDateValue')}.doExpand();"
onclick="#{rich:component('fixedDateValue')}.doExpand()" width="20px"
buttonClass="calendar-button-style">
<f:convertDateTime type="date" pattern="#{loginBean.userPrefVO.preferredDateFmt}" />
<f:facet name="header">
<h:panelGrid columns="3" width="50%"
columnClasses="fake, width100 talign">
<h:outputText value="{previousMonthControl}"
style="font-weight:bold;" />
<h:outputText value="{currentMonthControl}"
style="font-weight:normal;padding-left:15px; text-align:center; cursor:pointer"
disabled="true" />
<h:outputText value="{nextMonthControl}"
style="font-weight:bold;" />
</h:panelGrid>
</f:facet>
<f:facet name="fixedDateValue" style=""></f:facet>
</rich:calendar>
</c:if>
<rich:spacer width="20px" />
</h:panelGrid>
</rich:column>
<rich:column width="205px">
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.datatype']}"/>
</f:facet>
<h:panelGrid id="filterdatatype">
<h:outputText value="#{bdata.columnDataType}" style="color:green;font-style: italic;font-size:10px;"/>
</h:panelGrid>
</rich:column>
</rich:extendedDataTable>
<!-- <a4j:outputPanel id="fScrollerPanel">
<rich:datascroller id="filterScroller" for="filtertable" ></rich:datascroller>
</a4j:outputPanel> -->
</rich:layoutPanel>
</rich:layout>
From the Richfaces showcase:
In order to turn on Ajax loading - you should just specify clientRows attribute with number of rows to be loaded on the client. In the sample below it's set to 15 or to 0 according to checkbox value. 0 value means load all the rows (or attribute could be just not defined at all).
I am using richfaces but it lacks colorpicker componenet. I found colorpicker in standbox
release of richfaces but I am unable to use it. How do I use it? Are there any other alternative colorpicker component?
<rich:dataTable id="addeditdtable"
value="#{Lecontroller.LeType.LeList}" var="Le" >
<rich:column>
<f:facet name="header">
<h:outputText value="Upper Range"/>
</f:facet>
<h:inputText value="#{Le.upperrange}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Color"/>
</f:facet>
<h:inputText class="makemecolorpicker" value="#{Le.color}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="ADD/Delete"/>
</f:facet>
<a4j:commandLink value="Add"
actionListener="#{Lecontroller.addLeDTO()}"
render="Leform:addeditdtable"/>
<h:outputText value=" / "/>
<a4j:commandLink value="Delete"
actionListener="#{Lecontroller.removeLeDTO(Le)}"
render="Leform:addeditdtable"/>
</rich:column>
</rich:dataTable>
This is rich datatable or jsf datatable with dynamic row addition. One of the column represents colorpicker where I should be able to pick a colour and save it.
i'm using richfaces 3.3.3 I've a rich:dataTable inside another rich:dataTable and both have a rich:dataScroller but the inner doesn't work:
<rich:dataTable id="dataTableVisibility" value="#{jsfGridUtenti.itemKeys}"
var="roleName" cellspacing="1"
cellpadding="1" border="1"
styleClass="tab" style="width:60%"
rowClasses="rdispari,rpari"
headerClass="headTab" rows="3"
rendered="#{jsfGridUtenti.renderPanelReportVisibility}">
<f:facet name="footer">
<rich:datascroller for="dataTableVisibility"
fastStep="10" pagesVar="pageCountCl"
pageIndexVar="pageIndexCl"
maxPages="9" renderIfSinglePage="false"
selectedStyle="font-weight:bold;">
</rich:datascroller>
</f:facet>
<h:column>
<f:facet name="header">
#{applicationMessages.ruolo}
</f:facet>
<a4j:commandLink reRender="reportUserVisibilityCompanyRoleClass" action="#{jsfGridUtenti.deleteAssociationRole(roleName)}">
<h:graphicImage styleClass="toolbarLabel" url="../resources/img/cancella.png" />
</a4j:commandLink>
<rich:spacer height="1" width="8" />
<h:outputText style="font-size:11px" value="#{roleName}"/>
</h:column>
<h:column>
<f:facet name="header">
#{applicationMessages.companyAssociate}
</f:facet>
<h:column>
<rich:dataTable id="dataTableCompany"
var="company" value="#{jsfGridUtenti.findCompanyInHashMap(roleName)}"
style="width:100%" rows="5"
rowClasses="rdispari,rpari"
columnsWidth="10%,10%,80%"
headerClass="headTab">
<f:facet name="footer">
<rich:datascroller for="dataTableCompany"
fastStep="10" pagesVar="pageCountCls"
pageIndexVar="pageIndexCls"
maxPages="9" ajaxSingle="true"
selectedStyle="font-weight:bold;"
renderIfSinglePage="false">
</rich:datascroller>
</f:facet>
<h:column>
<a4j:commandLink reRender="reportUserVisibilityCompanyRoleClass" action="#{jsfGridUtenti.deleteAssociationCompany(roleName,company)}">
<h:graphicImage styleClass="toolbarLabel" url="../resources/img/cancella.png" />
</a4j:commandLink>
</h:column>
<h:column>
<a4j:commandLink immediate="true" action="#{jsfGridUtenti.setCompanyToShow(roleName,company)}"
reRender="showClassi,panelGridReport">
<h:graphicImage styleClass="toolbarLabel" url="../resources/img/lente.png" />
</a4j:commandLink>
</h:column>
<h:column>
<h:outputText style="font-size:11px" value="#{company.label}"/>
</h:column>
</rich:dataTable>
</h:column>
</h:column>
</rich:dataTable>
Now when I click on the outer rich:dataScroller it works well, instead when I click on the inner nothing happens. How can I fix?
This is a known issue. rich:datascroller doesn't support nested iteration components such as dataTable, repeat etc.
There is a JIRA issue for this.
Did you say 'nothing happens'? Did you look at your console? Doesn't it display a warning like this?
The requested page #2 isn't found in the model containing 1 pages. Paging is reset to page #1
I got the same warning message and solved it by adding a session variable like:
<rich:dataScroller for="table" page="#{sessionBean.page}" />
In my case the bean wasn't accessible (due to scope) before I changed the code. I was on the wrong track because I would have expected a warning/error pointing out that the problem is related to the expression language.
I have problem with datatable using Primefaces 2.2.1 and JSF 2.0.
I have used filtering and paging in the datatable. When I try to filter the selected data is displayed and when i remove the filter the entire data is displayed. But after this when i try to use paging then suddendly all the rows becomes blank(empty)
See screenshot below
Any suggestions. Please help.
.xhtml file
<p:dataTable var="user" value="#{userManagedBean.searchUsersResults}"
selection="#{userManagedBean.selectedUser}" selectionMode="single"
dynamic="true"
onRowSelectUpdate="userUpdateForm"
onRowUnselectUpdate="userUpdateForm"
rowSelectListener="#{userManagedBean.onUserSelect}"
rowUnselectListener="#{userManagedBean.onUserUnselect}"
paginator="true" rows="10" style="width: 70% ">
<p:column sortBy="#{user.userId}" filterBy="#{user.userId}" >
<f:facet name="header">
<h:outputText value="Id" />
</f:facet>
<h:outputText value="#{user.userId}" />
</p:column>
<p:column sortBy="#{user.username}" filterBy="#{user.username}">
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{user.username}" />
</p:column>
<p:column sortBy="#{user.emailId}" filterBy="#{user.emailId}">
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<h:outputText value="#{user.emailId}" />
</p:column>
<p:column sortBy="#{user.dob}" filterBy="#{user.dob}">
<f:facet name="header">
<h:outputText value="DOB" />
</f:facet>
<h:outputText value="#{user.dob}" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:outputText>
</p:column>
</p:dataTable>
<p:panel id="userDetailsPanelId" header="Users Details" style="width:60%;">
<h:panelGrid columns="2" cellpadding="2" id="userUpdateForm" border="0" >
<h:outputLabel for="#{userManagedBean.selectedUser.userId}" value="UserId"/>
<h:inputText value="#{userManagedBean.selectedUser.userId}" style="width: 100%;" readonly="true"></h:inputText>
<h:outputLabel for="#{userManagedBean.selectedUser.username}" value="Username"/>
<h:inputText value="#{userManagedBean.selectedUser.username}" readonly="true"></h:inputText>
<h:outputLabel for="#{userManagedBean.selectedUser.emailId}" value="EmailId"/>
<h:inputText value="#{userManagedBean.selectedUser.emailId}" readonly="true"></h:inputText>
<h:outputLabel for="#{userManagedBean.selectedUser.gender}" value="Gender"/>
<h:inputText value="#{userManagedBean.selectedUser.gender}" readonly="true"></h:inputText>
<h:outputLabel for="#{userManagedBean.selectedUser.dob}" value="DOB"/>
<h:inputText value="#{userManagedBean.selectedUser.dob}" readonly="true">
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:inputText>
</h:panelGrid>
</p:panel>
</h:form>
</center>
I encountered the same problem and eventually discovered it was caused by my value object (in this case your user object) not implementing Serializable.
I'm pretty sure that this known issue has been resolved in both the 2.2.RC and the 2.2 final. I suggest updating your jar file.