RichFaces 4 : <rich:Jquery> Datatable Style Effect as in RF showcase not working in a Scope View

Question

I'm trying to do styling on my jsf datatable as show here :

It's working the first time the page load. But when i make a sort on a column with an ajax call (as explained on the link shown before) , the styling disappears. If I refresh, the styling is coming back.

If i put my scope in request scop. The styling is working but the function sorting is no more working. Thing i don't really understand well. (Interested in an explanation on that phenomena...)

So i understand that jquery is concerned but i don't find a way to tell: "heyy, don't make styling disappears when I sort my datatable values"

Something to do with reRender maybe ?

BalusC, any idea ? :)

Thanks a lot guys,

Have a nice day.

<h:form id="formSort" >

<a4j:outputPanel id="ajaxOutputPanel" layout="block" ajaxRendered="true">

        <rich:dataTable  id="customList"  style="width:70%;margin-left:auto;margin-right:auto;" var="c" value="#{participant.listParticipant}"   rendered="#{not empty participant.listParticipant}"
                styleClass="stable"
                rowClasses="order-table-odd-row,order-table-even-row">

            <f:facet name="header"><h:outputText value="PARTICIPANTS" /></f:facet>

            <rich:column>
               <f:facet name="header">  <h:outputText value="ID DE L'ETUDE" /></f:facet>
                <h:outputText value="#{c.id_study}" />
            </rich:column>

            <rich:column  sortBy="#{c.enrollment_date}" id="enrollment_date" comparator="#{participant.dateComparator}"  sortOrder="#{participant.dateOrder}">
                <f:facet name="header" >
                    <a4j:commandLink value="DATE D'INCLUSION" render="customList" action="#{participant.sortByDates}" />
                </f:facet>
                <h:outputText value="#{c.enrollment_date}" />
            </rich:column>

        </rich:dataTable>


        </rich:panel>

</a4j:outputPanel>

</h:form>

<rich:jQuery selector="#customList tr:odd" query="addClass('odd-row')"  />
<rich:jQuery selector="#customList tr:even" query="addClass('even-row')" />
<rich:jQuery selector="#customList tr"  query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#customList tr"  query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>  

Answer 1

Ok i have something better doing this adding attach-type="live" and event type :

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

<rich:jQuery selector="#customList tr"  event ="mouseover" query="jQuery(this).addClass('active-row')" attachType="live"/>
<rich:jQuery selector="#customList tr"  event ="mouseout" query="jQuery(this).removeClass('active-row')" attachType="live"/>

My effect is working for mouse over and mouse out. But the zebra style is still not working. And I can't affect an event on the two first rich:query tag... I'don't have any idea here... Someone, thanks ? keep looking for a solution....

The css style is :

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

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

 .active-row {background-color: #FFEBDA !important;cursor: pointer;}

An another question why in rich:datatable, rowClasses is set to "order-table-odd-row,order-table-even-row" whereas my css is only named odd-row and even-row. I'm lost on this...

Update: I change the css into order-table-even-row,order-table-odd-row... and now evrything is working correctly.