datascroller customize question

[stevoffm]

Hi,

2 quick questions about the great datascroller component:

1. I apply zebra style to my paginated table via <rich:jQuery>. The initial rendering of the table works fine and the zebra style is applied. When I navigate to another page and the table is rerendered style is lost. I already tried to rerender the rich:jQuery element by adding it's id in the reRender attribute of rich:datascroller with no success. How can I get this working?!

<rich:datascroller for="myTable" maxPages="10"
id="myTableScroller" pagesVar="pages"
pageIndexVar="pageIndex" width="430" reRender="zebra">
<f:facet name="pages">
 <h:outputText value="#{pageIndex} / #{pages}"></h:outputText>
</f:facet>
</rich:datascroller>

<rich:jQuery id="zebra" selector="#myTable tr:odd" timing="onload" query="addClass('bgGrey')" />

2. I have a problem customizing my datascroller controls. I need the default controls (like in the livedemo) meaning back, forward, fastforward, fastrewind and the pages like 1,2,3,4,5... and ADDITIONALLY I need sth like:
Entry 1 - 10 of 500 for example. So all in all. sth like:

Entry 1 - 10 of 500 | << | < | 1,2,3,4,5 | > | >>

I tried to add this with the facet tag (as you can see it in the code snippet above) but by using this, the pages (1,2,3,4,5) are REPLACED by the facet with pageIndex and pages values. Is it possible to just add this facet without replacing the pages display?

Okay may be these questions were'nt quick but they are at least worth to answer ;)

Any help is welcome, thanks in advance!

Cheers

[patrickmadden]

Hi, I'm having the same problem with zebra style rows using a rich:datagrid and rich:datascroller.

My zebra styling works perfectly for the first page. However, when I click on any other page the zebra styling goes away. I'm using 3.2.2.GA, JBoss 4.2.3.GA and Seam 2.1.0.GA

Here is my view code (it is included on a page that has the css defined to give the colors for the odd and even rows similar to the jquery example provided by the rich faces demo.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich">

 <ui:include src="/includes/imageSortPanel.xhtml"/>

 <rich:dataGrid id="desktopImageTable"
 value="#{search.desktopImageResultTable.sortedResults}"
 var="result" columns="4" elements="12" width="100%" border="0"
 columnClasses="imageColumn">

 <ui:include src="/includes/imagePanel.xhtml"/>

 <f:facet name="footer">
 <rich:datascroller/>
 </f:facet>
 </rich:dataGrid>

 <rich:jQuery selector="#desktopImageTable tr:odd" query="addClass('odd-row')" />
 <rich:jQuery selector="#desktopImageTable tr:even" query="addClass('even-row')" />

</ui:composition>

I've basically replicated the google style image search but for enterprise type application where an image is rendered centered using 4 colums with some information under each image. I too have tried using some of the extended attributes of datascroller such as 'for' and 'rerender' to no avail.

Here is how my CSS is defined in my global theme.css

.odd-row
{
 background-color: #ECF3FE;
}

.even-row
{
 background-color: #FCFFFE;
}

.imageColumn
{
 border: none;
 width: 25%;
 text-align:center;
 margin-left: auto;
 margin-right: auto;
}

Any help is greatly appreciated!

Thanks,

PVM

[patrickmadden]

Hi,

I've solved the problem. I'm not sure if my fix is a hack or if it is by design.

I've found that if I use the rich:datascroller and the reRender tag using the parent ID of the rich:dataGrid or probably any other table component the zebra style is applied to all pages.

For example consider the following:

<ui:composition>
....
 <rich:simpleTogglePanel id="desktopImageTogglePanelID" switchType="client" label="Images" rendered="#{search.desktopImagesTableAvailable}" opened="true">
 <ui:include src="/includes/imageUniversalPanel.xhtml"/>
 </rich:simpleTogglePanel>

.....
</ui:composition>

and then the following included imageUniversalPanel.xhtml - the zebra style is rendered correctly.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich">

 <ui:include src="/includes/imageSortPanel.xhtml"/>

 <rich:dataGrid id="desktopImageTable"
 value="#{search.desktopImageResultTable.sortedResults}"
 var="result" columns="4" elements="12" width="100%" border="0"
 columnClasses="imageColumn">

 <ui:include src="/includes/imagePanel.xhtml"/>

 <f:facet name="footer">
 <rich:datascroller reRender="desktopImageTogglePanelID"/>
 </f:facet>

 </rich:dataGrid>

 <rich:jQuery selector="#desktopImageTable tr:odd" query="addClass('odd-row')" />
 <rich:jQuery selector="#desktopImageTable tr:even" query="addClass('even-row')" />

</ui:composition>

Hope this helps,

PVM