TabPanel DataTable sorting/filtering broken when switchType=
dpaterson Oct 1, 2008 10:51 AMI'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?