0 Replies Latest reply on Feb 10, 2012 1:38 PM by venuvanama

scrollableDataTable not working properly

venuvanama Feb 10, 2012 1:38 PM

Hi,

I am trying to use rich:scrollableDataTable to display my search results, I am having too many issues getting this component to work as advertised. I am having several problems with this, please some one from the expert group help me getting this to work. Following is the description of some of the problems I am having and the environment I am using.

I am using JSF 1.2, facelets, myfaces1.2, richfaces 3.3.0.

I am able to get this component to display properly on IE8.0, however when I scroll down and then do a sort the scroll bar scrolls all the way to the bottom of the table. Now on FireFox it is not even displaying the table properly, it doesn't display column headers in FireFox, I am using FireFox 3.6.25 version, also on FireFox columns are merged with one another and data is all messed up. I tried several different ways to solve this issue with no luck.

Here is my xhtml file:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html 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:s="http://myfaces.apache.org/sandbox"

xmlns:t="http://myfaces.apache.org/tomahawk"

xmlns:c="http://java.sun.com/jstl/core">

<body>

<ui:composition template="/WEB-INF/layout/layout.xhtml">

<ui:define name="title">

Device Search Results

</ui:define>

<ui:define name="content">

<h:form id="deviceSearchResultsForm" >

<div>

<h1>Device Search Results

<rich:spacer height="35px" />

<a4j:status >

<f:facet name="start">

<h:graphicImage value="/images/loading.gif" />

</f:facet>

</a4j:status>

</h1>

</div>

<rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px"

width="900px" id="deviceSearchResultsTable" rows="40" columnClasses="col"

value="#{deviceMasterFormBean.searchResults}" var="device" sortMode="single"

sortOrder="#{deviceMasterFormBean.order}" first="0">

<rich:column id="tagNumber">

<f:facet name="header">

<h:outputText styleClass="headerText" value="Tag #" />

</f:facet>

<h:outputText value="#{device.tagNumber}" />

</rich:column>

<rich:column id="ip">

<f:facet name="header">

<h:outputText styleClass="headerText" value="IP" />

</f:facet>

<h:outputText value="#{device.ip}" />

</rich:column>

<rich:column id="name">

<f:facet name="header">

<h:outputText styleClass="headerText" value="Name" />

</f:facet>

<h:outputText value="#{device.name}" />

</rich:column>

<rich:column id="domainName">

<f:facet name="header">

<h:outputText styleClass="headerText" value="Domain" />

</f:facet>

<h:outputText value="#{device.domainName}" />

</rich:column>

<rich:column id="namespace">

<f:facet name="header">

<h:outputText styleClass="headerText" value="Namespace" />

</f:facet>

<h:outputText value="#{device.namespace}" />

</rich:column>

<rich:column id="nameType">

<f:facet name="header">

<h:outputText styleClass="headerText" value="Name Type" />

</f:facet>

<h:outputText value="#{device.nameType}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedParentName}">

<f:facet name="header">

<h:outputText value="Parent Name" />

</f:facet>

<h:outputText value="#{device.parentName}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedParentDomain}">

<f:facet name="header">

<h:outputText value="Parent Domain" />

</f:facet>

<h:outputText value="#{device.parentDomain}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedPrimaryName}">

<f:facet name="header">

<h:outputText value="Primary Name" />

</f:facet>

<h:outputText value="#{device.primaryName}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedPrimaryDomain}">

<f:facet name="header">

<h:outputText value="Primary Domain" />

</f:facet>

<h:outputText value="#{device.primaryDomain}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedBldg}">

<f:facet name="header">

<h:outputText value="Building" />

</f:facet>

<h:outputText value="#{device.building}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedFloor}">

<f:facet name="header">

<h:outputText value="Floor" />

</f:facet>

<h:outputText value="#{device.floor}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedColBay}" >

<f:facet name="header">

<h:outputText value="Column/Bay" />

</f:facet>

<h:outputText value="#{device.colbay}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedCity}">

<f:facet name="header">

<h:outputText value="City" />

</f:facet>

<h:outputText value="#{device.city}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedManuf}">

<f:facet name="header">

<h:outputText value="Manufacturer" />

</f:facet>

<h:outputText value="#{device.manufacturer}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedMac}">

<f:facet name="header">

<h:outputText value="MAC" />

</f:facet>

<h:outputText value="#{device.mac}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedAddrBlk}">

<f:facet name="header">

<h:outputText value="Address Block" />

</f:facet>

<h:outputText value="#{device.network}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedDeviceType}">

<f:facet name="header">

<h:outputText value="Device Type" />

</f:facet>

<h:outputText value="#{device.deviceType}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedStatus}">

<f:facet name="header">

<h:outputText value="Status" />

</f:facet>

<h:outputText value="#{device.ipStatus}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedChDate}">

<f:facet name="header">

<h:outputText value="Change Date" />

</f:facet>

<h:outputText value="#{device.ipChangeDate}" />

</rich:column>

<rich:column width="200px" rendered="#{deviceMasterFormBean.selectedLeaseExpire}">

<f:facet name="header">

<h:outputText value="Lease Expire" />

</f:facet>

<h:outputText value="#{device.dhcpLease}" />

</rich:column>

</rich:scrollableDataTable>

<h:panelGrid columns="2" id="noResultsFound" width="100%" rendered="#{deviceMasterFormBean.rowCount == 0}">

<h:outputLabel id="noResultsFound1" >

<h:outputText style="color: #DD0707" value="No Records Found"/>

</h:outputLabel>

</h:panelGrid>

</div>

<rich:spacer height="1px" />

</div>

</h:form>

</ui:define>

</ui:composition>

</body>

</html>

I really appreciate any help with this.

Thanks,

Venu