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

    Sorting example scrollableDataTable

    David Bolsover Newbie

      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

        • 2. Re: Sorting example scrollableDataTable
          David Bolsover Newbie

          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.


          • 3. Re: Sorting example scrollableDataTable
            Ilya Shaikovsky Master

            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.

            • 4. Re: Sorting example scrollableDataTable
              David Bolsover Newbie

              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?