Adding binding attribute to data table looses css styling on tab switch
tanzeem Apr 17, 2012 5:52 AMHi,
We are using JSF 2.0 along with richfaces for our application.My requirement is, onBlur of inputText component we call listener (AjaxBehaviorEvent) in Session Scoped backing bean and get the row number/object using binding attribute of rich:data table. When page is loaded for the first time css styling looks perfect but when i switch tabs my table looses border & CSS style.
This is my xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="feecodeDowngrade">
<rich:dataTable id="feeCodeDowngradeTable" selectionMode="none"
layout="block" style="width:250px;"
binding="#{feeCodeDowngradeBean.dataTable}"
value="#{feeCodeDowngradeBean.feeCodeDowngradeList}" var="expList"
iterationStatusVar="it" rows="10" rowClasses="odd-row, even-row">
<rich:column>
<f:facet name="header" styleClass="rf-edt-hdr-c-cnt">
<h:outputText value="Relationship Id" />
</f:facet>
<h:inputText id="relationshipId" execute="keyCode"
value="#{expList.relationshipId}">
<f:validateRegex pattern="^(12)[\d]+$" />
<rich:validator />
<f:ajax event="blur"
listener="#{feeCodeDowngradeBean.valueListener}"
render="feeCodeDowngradeTable" />
</h:inputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Current Rel Size" style="white-space:nowrap" />
</f:facet>
<h:outputText value="#{expList.relSize}" />
</rich:column>
</rich:dataTable>
</h:form>
</ui:composition>
This is my backing bean
package com.AB;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
import org.richfaces.component.UIDataTable;
@ManagedBean
@SessionScoped
public class FeeCodeDowngradeBean {
private UIDataTable dataTable;
public void valueListener(AjaxBehaviorEvent e){
FeeCodeDowngrade feeCode= (FeeCodeDowngrade) dataTable.getRowData();
System.out.println(feeCode.getRelationshipId());
System.out.println(feeCode.getRelSize());
feeCode.setRelSize("This is new size");
}
private List<FeeCodeDowngrade> feeCodeDowngradeList = null;
public List<FeeCodeDowngrade> getFeeCodeDowngradeList() {
if(feeCodeDowngradeList == null){
System.out.println("fee code downgrade List is empty: I AM IN");
feeCodeDowngradeList = new ArrayList<FeeCodeDowngrade>();
FeeCodeDowngrade expBean1=new FeeCodeDowngrade();
FeeCodeDowngrade expBean2=new FeeCodeDowngrade();
FeeCodeDowngrade expBean3=new FeeCodeDowngrade();
expBean1.setRelationshipId("1201");
expBean1.setRelSize("one two zero one");
expBean2.setRelationshipId("1202");
expBean2.setRelSize("one two zero two");
expBean3.setRelationshipId("1203");
expBean3.setRelSize("one two zero three");
feeCodeDowngradeList.add(expBean1);
feeCodeDowngradeList.add(expBean2);
feeCodeDowngradeList.add(expBean3);
}
return feeCodeDowngradeList;
}
public void setFeeCodeDowngradeList(List<FeeCodeDowngrade> feeCodeDowngradeList) {
this.feeCodeDowngradeList = feeCodeDowngradeList;
}
public UIDataTable getDataTable() {
return dataTable;
}
public void setDataTable(UIDataTable dataTable) {
this.dataTable = dataTable;
}
}
When page is first loaded :
Now, when i go to 1st tab and switch back to 2nd tab :
Quick solution will be highly appreciated.
Thank you.
-
firstTimeRendered.JPG 11.2 KB
-
afterSwitchingTab.JPG 10.2 KB