2 Replies Latest reply on Dec 28, 2012 12:20 PM by Leonardo Devai

    Adding binding attribute to data table looses css styling on tab switch

    Tanzeem Ahmed Newbie

      Hi,

             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  :

       

      firstTimeRendered.JPG

       

      Now, when i go to 1st tab and switch back to 2nd tab :

       

      afterSwitchingTab.JPG

       

       

      Quick solution will be highly appreciated.

       

      Thank you.