4 Replies Latest reply on Jul 14, 2009 7:53 AM by bolsover

Sorting example scrollableDataTable

bolsover Jul 14, 2009 3:46 AM

Hi
I'm in need of help with sorting a scrollableDataTable; can anyone point me to a working example (JSP and backing bean).

I've done a search (honest!) but can only find incomplete examples - either just the JSP or JSP + seemingly unrelated Java code. There are nice examples on the exadel site but these don't include the java code.

The main problem I have is how to implement sorting in response to a user click on a header.

Thanks, David

1. Re: Sorting example scrollableDataTable

nbelaevski Jul 14, 2009 4:01 AM (in response to bolsover)

Hi David,

You can check out live demo sources from SVN: http://www.jboss.org/community/wiki/RichFacesWikiHomePage
Actions
2. Re: Sorting example scrollableDataTable

bolsover Jul 14, 2009 6:16 AM (in response to bolsover)

Hi Nick
Thanks for this - actually, I had already looked at these sources but could not make much sense of them...
Just to be sure, I copied all the code to my own environment and ran the cars page..
There are problems..
Sorting on columns 1 and 2 seems to be completely broken.
Sorting on remaining columns appears to work.
Selecting a line popsup data for different line.

Files copied over were DataTableScrollerBean, DemoInventoryItem and Facet.

I'm sure I have copied the code correctly.
Actions
3. Re: Sorting example scrollableDataTable

ilya_shaikovsky Jul 14, 2009 6:27 AM (in response to bolsover)

which RF version? Many issues of SDT component were fixed before 3.3.1GA so I highly recommend it.

Also provide page code if it not copied but just yours.
Actions

4. Re: Sorting example scrollableDataTable

bolsover Jul 14, 2009 7:53 AM (in response to bolsover)

Hi Ilya
RF is version 3.3.1.
Code is exactly same as source files I mentioned - just in different package to suit my test environment.
The Page is JSP rather than facets..

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
 .scrolls{
 width:300px;
 height:200px;
 overflow:auto;
 }
</style>
<html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="../yosemite.css">
 <title>Yosemite</title>
 </head>


 <body>
 <f:view>

 <h:form>
 <rich:spacer height="30" />
 <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px"
 width="700px" id="carList" rows="40" columnClasses="col"
 value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
 binding="#{dataTableScrollerBean.table}"
 sortOrder="#{dataTableScrollerBean.order}"
 selection="#{dataTableScrollerBean.selection}">

 <rich:column id="make">
 <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>
 <h:outputText value="#{category.make}" />
 </rich:column>
 <rich:column id="model">
 <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>
 <h:outputText value="#{category.model}" />
 </rich:column>
 <rich:column id="price">
 <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet>
 <h:outputText value="#{category.price}" />
 </rich:column>
 <rich:column id="mileage">
 <f:facet name="header"><h:outputText styleClass="headerText" value="Mileage" /></f:facet>
 <h:outputText value="#{category.mileage}" />
 </rich:column>
 <rich:column width="200px" id="vin">
 <f:facet name="header"><h:outputText styleClass="headerText" value="VIN" /></f:facet>
 <h:outputText value="#{category.vin}" />
 </rich:column>
 <rich:column id="stock">
 <f:facet name="header"><h:outputText styleClass="headerText" value="Stock" /></f:facet>
 <h:outputText value="#{category.stock}" />
 </rich:column>
 </rich:scrollableDataTable>
 <rich:spacer height="20px"/>
 <a4j:commandButton value="Show Current Selection" reRender="table"
 action="#{dataTableScrollerBean.takeSelection}"
 oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
 </h:form>
 <rich:modalPanel id="panel" autosized="false" keepVisualState="false" width="315" height="230">
 <f:facet name="header">
 <h:outputText value="Selected Rows"/>
 </f:facet>
 <f:facet name="controls">
 <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
 </f:facet>
 <h:panelGroup layout="block" styleClass="scrolls">
 <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">
 <rich:column>
 <f:facet name="header"><h:outputText value="Make" /></f:facet>
 <h:outputText value="#{sel.make}" />
 </rich:column>
 <rich:column id="model">
 <f:facet name="header"><h:outputText value="Model" /></f:facet>
 <h:outputText value="#{sel.model}" />
 </rich:column>
 <rich:column id="price">
 <f:facet name="header"><h:outputText value="Price" /></f:facet>
 <h:outputText value="#{sel.price}" />
 </rich:column>
 <rich:column id="mileage">
 <f:facet name="header"><h:outputText value="Mileage" /></f:facet>
 <h:outputText value="#{sel.mileage}" />
 </rich:column>
 <rich:column id="stock">
 <f:facet name="header"><h:outputText value="Stock" /></f:facet>
 <h:outputText value="#{sel.stock}" />
 </rich:column>
 </rich:dataTable>
 </h:panelGroup>
 </rich:modalPanel>

 </f:view>
 </body>
</html>

dataTable ScrollerBean is defined as request scope bean in faces-config.xml
Environment is Tomcat 6.0.18

I have got a little further with some sorting of my own data - but for some reason, I can only sort in one direction when clicking on header - any ideas why?

Go to original post