1 Reply Latest reply on Oct 2, 2008 5:30 AM by Ilya Shaikovsky

    TabPanel DataTable sorting/filtering broken when switchType=

    David Paterson Newbie

      I'm using the TabPanel component with a DataTable on two different tabs. When I first access the page the first tab is rendered and the sorting works fine. When switchType is set to ajax or server and I switch tabs sorting/filtering in tab 2's datatable is broken. Also when I switch back to tab 1 the sorting/filtering no longer works either. I must re-initialize the page in order to get tab 1 sorting functioning again.

      I have verified that the datatable in tab 2 works fine when I take it out of the TabPanel component.

      I am using RichFaces 3.2.2GA with facelets.

      Here's the tab component page:

      <!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j"
       template="layout/template.xhtml">
      
      <ui:define name="body">
       <!-- show messages for errors etc. -->
       <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
      
       <h:panelGrid columns="1">Sample content will eventually be batch update area</h:panelGrid>
      
      <rich:tabPanel id="preferencesTP" selectedTab="#{preferencesTab}" switchType="server" styleClass="tabs">
       <rich:tab id="countryTab" styleClass="tab" name="countryEdit" label="#{messages['label.preferences.countries.tab']}">
       <ui:include src="preferenceTabs/CountryList.xhtml" />
       </rich:tab>
       <rich:tab id="stateProvinceTab" styleClass="tab" name="stateProvinceEdit" label="#{messages['label.preferences.state.province.tab']}">
       <ui:include src="preferenceTabs/StateProvinceList.xhtml" />
       </rich:tab>
       <rich:tab styleClass="tab" label="#{messages['label.preferences.country.tab']}">
       Here is tab #3
       </rich:tab>
      </rich:tabPanel>
      
      </ui:define>
      </ui:composition>


      And here is the contents of StateProvinceList.xhtml include. Note I have tried moving the dataTable directly into rich:tab tag instead of using ui:include but that has no effect either.


      <!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j">
      
      <a:form id="resultsStateProvince">
       <div class="results" id="stateProvinceList">
       <h:outputText value="#{messages['preferences.state.province.search.results.empty']}"
       rendered="#{empty stateProvinceList.resultList}"/>
      
      
       <!-- Begin data scroller top -->
       <h:panelGrid columns="2" styleClass="scroller" rendered="#{not empty stateProvinceList.resultList}">
       <h:outputFormat id="txtCount1StateProvince" value="#{messages['counts']}" >
       <f:param value="#{stateProvinceList.page}"/>
       <f:param value="#{stateProvinceList.pageCount}"/>
       <f:param value="#{stateProvinceList.startRecordNumber}"/>
       <f:param value="#{stateProvinceList.endRecordNumber}"/>
       <f:param value="#{stateProvinceList.maxResults}"/>
       <f:param value="#{stateProvinceList.resultCount}"/>
       </h:outputFormat>
      
       <rich:datascroller align="right"
       style="text-align:right;"
       stepControls="hide"
       boundaryControls="show"
       fastControls="show"
       id="ds1StateProvince" for="listStateProvince"
       pageIndexVar="pageIndex"
       pagesVar="pageCount"
       renderIfSinglePage="true"
       rendered="#{not empty stateProvinceList.resultList}"
       reRender="ds2StateProvince,txtCount1StateProvince,txtCount2StateProvince">
       </rich:datascroller>
       </h:panelGrid>
      
       <!-- Begin table -->
       <rich:dataTable id="listStateProvince"
       rows="#{stateProvinceList.maxResults}"
       reRender="ds1StateProvince,ds2StateProvince,txtCount1StateProvince,txtCount2StateProvince"
       var="stateProvince"
       value="#{stateProvinceList.resultList}"
       rendered="#{not empty stateProvinceList.resultList}"
       rowClasses="rowOdd, rowEven">
       <f:facet name="header">
       </f:facet>
       <f:facet name="footer">
       </f:facet>
       <rich:column headerClass="tableHeaderFiltered" sortBy="#{stateProvince.type}" filterMethod="#{stateProvinceList.filterCountry}">
       <f:facet name="header">
       <h:panelGroup>
       <h:outputText styleClass="headerText"
       value="#{messages['preferences.state.province.type']}"/><br/>
       <h:selectOneMenu onclick="Event.stop(event);"
       id="selectCountry"
       value="#{stateProvinceList.stateProvince.type}">
       <f:selectItem itemLabel="All" itemValue="all"/>
       <f:selectItems value="#{countrySel}" />
       <a:support event="onchange"
       reRender="listStateProvince,ds1StateProvince,ds2StateProvince,txtCount1StateProvince,txtCount2StateProvince" />
       </h:selectOneMenu>
       </h:panelGroup>
       </f:facet>
       <h:outputText value="#{countryMap[stateProvince.type]}"/>
       </rich:column>
       <rich:column headerClass="tableHeaderFiltered" style="width:20%;" sortBy="#{stateProvince.id}" filterBy="#{stateProvince.id}" filterEvent="onkeyup">
       <f:facet name="header">
       <span>
       #{messages['preferences.state.province.id']}
       </span>
       </f:facet>
       #{stateProvince.id}
       </rich:column>
       <rich:column headerClass="tableHeaderFiltered" style="width:20%;" sortBy="#{stateProvince.key}" filterBy="#{stateProvince.key}" filterEvent="onkeyup" >
       <f:facet name="header">
       #{messages['preferences.state.province.key']}
       </f:facet>
       #{stateProvince.key}
       </rich:column>
       <rich:column headerClass="tableHeaderFiltered" style="width:55%;" sortBy="#{stateProvince.value}" filterBy="#{stateProvince.value}" filterEvent="onkeyup" >
       <f:facet name="header">
       <span style="text-align:center;">
       #{messages['preferences.state.province.value']}
       </span>
       </f:facet>
       #{stateProvince.value}
       </rich:column>
       <rich:column headerClass="tableHeaderFiltered" style="width:5%;">
       <f:facet name="header">#{messages['action']}</f:facet>
       <s:link view="/PreferencesStateProvinceEdit.xhtml" value="#{messages['edit']}" id="stateProvince">
       <f:param name="stateProvinceId" value="#{stateProvince.id}"/>
       </s:link>
       </rich:column>
       </rich:dataTable>
      
       <!-- Begin datascroller bottom -->
       <h:panelGrid columns="2" styleClass="scroller" rendered="#{not empty stateProvinceList.resultList}">
      
       <h:outputFormat id="txtCount2StateProvince" value="#{messages['counts']}" >
       <f:param value="#{stateProvinceList.page}"/>
       <f:param value="#{stateProvinceList.pageCount}"/>
       <f:param value="#{stateProvinceList.startRecordNumber}"/>
       <f:param value="#{stateProvinceList.endRecordNumber}"/>
       <f:param value="#{stateProvinceList.maxResults}"/>
       <f:param value="#{stateProvinceList.resultCount}"/>
       </h:outputFormat>
       <rich:datascroller align="right"
       stepControls="hide"
       boundaryControls="show"
       fastControls="show"
       id="ds2StateProvince" for="listStateProvince"
       renderIfSinglePage="true"
       reRender="ds1StateProvince,txtCount1StateProvince,txtCount2StateProvince"/>
       </h:panelGrid>
       </div>
       </a:form>
       <s:div styleClass="actionButtons">
       <s:button view="/PreferencesStateProvinceEdit.xhtml" id="createStateProvince" value="#{messages['btn.preferences.state.province.create']}">
       <f:param name="stateProvinceId"/>
       </s:button>
       </s:div>
      
      </ui:composition>


      Has anyone had a similar issue?

        • 1. Re: TabPanel DataTable sorting/filtering broken when switchT
          Ilya Shaikovsky Master

          seems can't be reproduced in a simple way

           <rich:tabPanel switchType="ajax">
           <rich:tab label="tab1">
           <h:form>
           <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="20" reRender="ds" id="simpletable">
           <f:facet name="header">
           <rich:columnGroup>
           <rich:column colspan="2" >
           <h:outputText value="Filtering Example"/>
           </rich:column>
           <rich:column breakBefore="true">
           <h:outputText value="State Name"/>
           </rich:column>
           <rich:column>
           <h:outputText value="State Capital"/>
           </rich:column>
           </rich:columnGroup>
           </f:facet>
           <rich:column filterBy="#{cap.state}" filterEvent="onkeyup">
           <f:facet name="header">
           <h:outputText value=" " title="Hack due to bug. Shuold be remoevd till release"></h:outputText>
           </f:facet>
           <h:outputText value="#{cap.state}"/>
           </rich:column>
           <rich:column filterBy="#{cap.name}" filterEvent="onkeyup">
           <h:outputText value="#{cap.name}"/>
           </rich:column>
           <f:facet name="footer">
           <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
           </f:facet>
           </rich:dataTable>
           </h:form>
           </rich:tab>
           <rich:tab label="tab2">
           <h:form>
           <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="20" reRender="ds" id="simpletable">
           <f:facet name="header">
           <rich:columnGroup>
           <rich:column colspan="2" >
           <h:outputText value="Filtering Example"/>
           </rich:column>
           <rich:column breakBefore="true">
           <h:outputText value="State Name"/>
           </rich:column>
           <rich:column>
           <h:outputText value="State Capital"/>
           </rich:column>
           </rich:columnGroup>
           </f:facet>
           <rich:column filterBy="#{cap.state}" filterEvent="onkeyup">
           <f:facet name="header">
           <h:outputText value=" " title="Hack due to bug. Shuold be remoevd till release"></h:outputText>
           </f:facet>
           <h:outputText value="#{cap.state}"/>
           </rich:column>
           <rich:column filterBy="#{cap.name}" filterEvent="onkeyup">
           <h:outputText value="#{cap.name}"/>
           </rich:column>
           <f:facet name="footer">
           <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
           </f:facet>
           </rich:dataTable>
           </h:form>
           </rich:tab>
           </rich:tabPanel>
          


          works fine for me.

          Provide more info. If there is some errors in a4j:log? chekc phasetracker logs also.