datascroller doesn't render if above dataGrid
I have a datascroller bound to a dataGrid. The dataGrid is ajax rendered from an a4j:commandButton on the page. If I place the datascroller above the dataGrid, when the page is rendered, the datascroller is empty. If I click the commandButton a second time, then the datascroller renders properly. I've tried all means of wrapping the datascroller in components such as rich:panel header facet with the dataGrid as the panel body, etc. but nothing seems to work other than putting the datascroller beneath the dataGrid. This seems like such a no-brainer and there are many posts in this forum about this problem. Does anybody have a solution?
I'm using:
facelets 1.1.12
richfaces 3.1.4
JSF 1.2
Here is my page code:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:u="http:/jsf.exadel.com/template/util" >
<link rel="stylesheet" type="text/css" media="all" href="#{facesContext.externalContext.requestContextPath}/css/default.css"/>
<h:form id="schedarrivform">
<rich:panel id="schedarrivpanel" style="width: 100%; height: 500px;">
<f:facet name="header">Process Scheduled Arrivals</f:facet>
<h:panelGrid id="pgrid1" columns="2" style="margin-top: 10px;">
<h:outputLabel styleClass="stdLabel" for="diagFacCombo" value="Facility: "/>
<h:selectOneListbox size="1" id="diagFacCombo" value="#{DOPIntakeScheduledArrivalsBean.facilityID}">
<f:selectItems value="#{CodeCacheBean.getCodes$['diagFacilityCode']}"/>
</h:selectOneListbox>
<h:outputLabel styleClass="stdLabel" value="Scheduled Arrival Date Range: "/>
<h:panelGrid columns="3">
<rich:calendar id="dateRangeStart" value="#{DOPIntakeScheduledArrivalsBean.dateRangeStart}" datePattern="MM/dd/yyyy"></rich:calendar>
<h:outputLabel styleClass="stdLabel" value=" To: "/>
<rich:calendar id="dateRangeEnd" value="#{DOPIntakeScheduledArrivalsBean.dateRangeEnd}" datePattern="MM/dd/yyyy"></rich:calendar>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="1">
<a4j:commandButton value="Retrieve" actionListener="#{DOPIntakeScheduledArrivalsBean.retrieveOffenders}" reRender="offenderList, dscroller1"/>
</h:panelGrid>
<rich:panel id="rpanel1" style="margin-top: 10px;">
<f:facet name="header">Scheduled Arrivals</f:facet>
<a4j:region id="dscroller1reg">
<rich:datascroller ajaxRendered="true" id="dscroller1" for="offenderList" style="margin-top: 6px; text-align: center; background-color: #c6c6c6;"></rich:datascroller>
</a4j:region>
<a4j:outputPanel id="offenderListPanel">
<rich:dataGrid ajaxRendered="true" style="height: 350px;" id="offenderList" value="#{DOPIntakeScheduledArrivalsBean.preArrivalOffenders}" var="PreArrivalOffenderBean" columns="1" elements="2">
<rich:panel id="rpanel2" style="width: 600px;">
<f:facet name="header">
<h:outputText value="#{PreArrivalOffenderBean.offenderName}" styleClass="stdLabelLight"></h:outputText>
</f:facet>
<table>
<tr>
<td align="right" width="10%"><h:outputText value="DOC#:" styleClass="tableLabel"/></td>
<td align="left" width="20%"><h:outputText value="#{PreArrivalOffenderBean.offenderID}" styleClass="tableText"/></td>
<td align="right" width="20%"><h:outputText value="Scheduled Arrival Date:" styleClass="tableLabel"/></td>
<td align="left" width="20%"><h:outputText value="#{PreArrivalOffenderBean.scheduledArrivalDate}" styleClass="tableText"><f:convertDateTime pattern="MM/dd/yyyy"/></h:outputText></td>
<td align="left" width="20%" rowspan="5" valign="top">
<rich:dataGrid id="taskList" value="#{PreArrivalOffenderBean.tasks}" var="PreArrivalTaskBean" columns="1" elements="3">
<f:facet name="header">
<h:outputText value="Pending Tasks" styleClass="stdLabel"></h:outputText>
</f:facet>
<a4j:commandLink limitToList="true" actionListener="#{DOPIntakeScheduledArrivalsBean.selectOffender}" reRender="confirm" rendered="#{PreArrivalTaskBean.isTaskConfirm}" oncomplete="${PreArrivalTaskBean.taskURL}" styleClass="linkText" value="#{PreArrivalTaskBean.taskName}"/>
<a4j:commandLink limitToList="true" reRender="maincontent" styleClass="linkText" rendered="#{PreArrivalTaskBean.isTaskAction}" value="#{PreArrivalTaskBean.taskName}">
<a4j:actionparam name="selectedURL" value="#{PreArrivalTaskBean.taskURL}" assignTo="#{DOPIntakeMenuBean.selectedURL}"/>
</a4j:commandLink>
</rich:dataGrid>
</td>
</tr>
<tr>
<td align="right"><h:outputText value="County:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.convictionCountyDisplay}" styleClass="tableText"/></td>
<td align="right"><h:outputText value="Offense Type:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.primaryFelonyMisdemeanorDisplay}" styleClass="tableText"/></td>
</tr>
<tr>
<td align="right"><h:outputText value="Gender:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.genderDisplay}" styleClass="tableText"/></td>
<td align="right"><h:outputText value="Sentence Length:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.sentenceLengthDisplay}" styleClass="tableText"/></td>
</tr>
<tr>
<td align="right"><h:outputText value="Race:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.raceDisplay}" styleClass="tableText"/></td>
<td align="right"><h:outputText value="Spec Char:" styleClass="tableLabel"/></td>
<td align="left"><h:outputText value="#{PreArrivalOffenderBean.specialCharacteristicsDisplay}" styleClass="tableText"/></td>
</tr>
<tr>
<td align="right"><h:outputText value="Birth Date:" styleClass="tableLabel"/></td>
<td align="left" colspan="3"><h:outputText value="#{PreArrivalOffenderBean.birthDate}" styleClass="tableText"><f:convertDateTime pattern="MM/dd/yyyy" /></h:outputText></td>
</tr>
</table>
</rich:panel>
</rich:dataGrid>
</a4j:outputPanel>
</rich:panel>
</rich:panel>
</h:form>
<rich:modalPanel id="task" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
<f:facet name="header">
<h:outputText value="Complete Task" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('task')" />
</f:facet>
<a4j:include id="taskconfirm" viewId="\taskconfirm.xhtml"/>
</rich:modalPanel>
<script>
function getRightTop(ref) {
var position = new Object();
position.top = 0;
position.left = 0;
return position;
}
</script>
</ui:composition>
Thanks in advance for any help you can provide