1 Reply Latest reply on Dec 10, 2007 8:13 AM by Damian Harvey

    zebra row scrollabledatatable sorting on column error

    John McClain Newbie

      Am using the richfaces demo for jquery where you add zebra striping to a datatable; Am using it on a scrollableDatatable and it worked right out the gate - great job! However, When I click on a sortable column, the resort and rerender removes the striping. Not sure what to do about that.
      here is code

      .odd-row {
      background-color: #CCCCBB;
      }
      .even-row {
      background-color: #EEEECC;
      }
      .active-row {
      background-color: #FFEBDA;
      }
      .
      .
      <div style="padding: 10px;"><h:form
       id="casetableform"
       style="width:802px;margin:auto;border:solid 1px">
      
       <rich:scrollableDataTable
       id="casetable"
       rows="50"
       columnClasses="col"
       value="#{caseList}"
       var="case"
       sortMode="single"
       width="800px"
       height="600px"
       selection="#{CASELISTFORM.selection}">
      
       <a4j:support
       event="onRowDblClick"
       action="#{CASELISTFORM.setSelectedCase(case)}">
       </a4j:support>
      
      
      
       <rich:column
       id="caseId"
       sortExpression="#{case.casenumber}">
      
       <f:facet name="header">
       <h:outputText
       styleClass="headerText"
       value="Case #" />
       </f:facet>
      
       <h:commandLink
       action="#{CASELISTFORM.setSelectedCase(case)}"
       value="#{case.casenumber}">
       </h:commandLink>
      
       </rich:column>
      
      .
      .
      
      
       <rich:column
       id="Status"
       sortExpression="#{case.statusDescription}">
      
       <f:facet name="header">
       <h:outputText
       styleClass="headerText"
       value="Status" />
       </f:facet>
      
       <h:outputText value="#{case.statusDescription}" />
      
       </rich:column>
      
      
      
       </rich:scrollableDataTable>
      
       <rich:jQuery
       selector="#casetable tr:odd"
       query="addClass('odd-row')" />
       <rich:jQuery
       selector="#casetable tr:even"
       query="addClass('even-row')" />
       <rich:jQuery
       selector="#casetable tr"
       query="mouseover(function(){jQuery(this).addClass('active-row')})" />
       <rich:jQuery
       selector="#casetable tr"
       query="mouseout(function(){jQuery(this).removeClass('active-row')})" />
      </h:form></div>
      


        • 1. Re: zebra row scrollabledatatable sorting on column error
          Damian Harvey Master

          I would think that you need someway to fire jQuery again. Should be relatively easy.

          I do my zebra-highlight rows without jQuery and I think that they would handle your situation:

          <rich:dataTable
           onRowMouseOver="tableRowColor=this.style.backgroundColor;this.style.backgroundColor=tableRowHighlight"
           onRowMouseOut="this.style.backgroundColor=tableRowColor"
           rowClasses="tableRowOdd, tableRowEven"
          

          Where the javascript variables tableRowColor and tableRowHighlight are defined on the page (I pull the rowHighligh from CSS)

          Cheers,

          Damian.