scrollableDataTable jQuery

[pourmo]

Hi
I have tried to apply the jQuery example for zibbra-style rows on scrollableDataTable, but it is not working.

Can someone let me know how I can add a odd-row , even-row effect on scrollableDataTable.

thanks
mo

[sergeysmirnov]

The internal structure of the scrollableDataTable is much complex than the simple table. If you have FireFox with FireBug you can find what selectors should be there.

[richuser]

You can use the rowClasses property of the scrollabledatatable and specify your odd and even css classes there.

For example: rowClasses=" odd, even"

Notice that there's a space before the odd class. Without the space, the css goes wrong when you do sorting.

[pourmo]

good stuff, I had tried this before , but for some reason it did not work when I had the scrollableDataTable in a togglePanel, I moved it out and it is ok now thanks, however under firefox and IE7 the row have a mouseover effect, is there a way I can disable this.
cheers,
Mo

[richuser]

There is the activeClass attribute where you could set a css class to be applied when the rows becomes active. Haven't tried this though.

What I did was to redefine the "dr-sdt-row-active" css class and just set the color attribute to black which is my default font color.

[pourmo]

I did this but still no good, I even tried activeClass, but Firefox seem to ignore all this.

<style>
 .dr-std-row-active{
 background-color:#f9e089
 color:black;
 }
</style>

[sergeysmirnov]

you forgot the ';' . It is important. Also, it is better to use 'rich-' instead if internal 'dr-' classes.

<style>
 .rich-sdt-row-active{
 background-color:#f9e089 ;
 color:black;
 }
</style>

[pourmo]

Thanks ,
However ".rich-sdt-row-active" is for the Active row, I want to be able to disable or change the hover effect that IE7 and FireFox give.
cheers,
Mo

[pourmo]

Actually I don't get this effect when looking at the scrollableDataTable Richfaces Demo, so I'm not sure what I have done to get this effect.

<h:form id = "searchForm" style="padding:0px;margin:0px;">
<rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="3" height="240px" width="750px"
id="searchSchedules"
rows="0" value="#{searchAction.items}"
var="item" sortMode="single" rowClasses="oddRow, evenRow">
<ui:include src="/modules/search/searchScrollableTableModel.xhtml" />

</rich:scrollableDataTable>
</h:form>

I'm using latest snapshot 3.1.3