2 Replies Latest reply on Nov 26, 2013 3:56 AM by morellik

    rich:dataTable zebra style

    morellik

      Dear all,

       

      I'm trying to enable zebra style on my dataTable, but I've some trouble. I follow the example from show case:

       

      <style>
                      .even-row {
                          background-color: #FCFFFE;
                      }
      
                      .odd-row {
                          background-color: #ECF3FE;
                      }
      
                      .active-row {
                          background-color: #FFEBDA !important;
                          cursor: pointer;
                      }
                  </style>
                  <rich:panel header="List User" style="width:800px;">
                      <h:form id="formID">
                          <rich:dataTable id="dataTable" value="#{localUserEJB.userlist}" var="n" rowClasses="odd-row, even-row"
                                          styleClass="stable"
                                          rows="10"
                                          >
                              <rich:column sortBy="#{n.lastName}" id="lastname" sortOrder="#{localUserEJB.lastnameOrder}"
                                           filterExpression="#{fn:containsIgnoreCase(n.lastName,
                                                               filteringBean.lastNameFilterString)}"
                                           >
                                  <f:facet name="header">
                                      <a4j:commandLink value="User" render="dataTable" action="#{localUserEJB.sortByLastname}" />
                                        
                                      <h:inputText value="#{filteringBean.lastNameFilterString}">
                                          <a4j:ajax event="change" render="dataTable" execute="@this" />
                                      </h:inputText>
      
                                  </f:facet>
                                  #{n.firstName} #{n.lastName}
      
      .......
      ........
      .........
      
        </rich:dataTable>
      
                      </h:form>
                       <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
                      <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
                      <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
                      <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
      
                      <rich:notifyMessages stayTime="2000" nonblocking="true" />
                  </rich:panel>
                              </rich:column>
      
      
      
      
      
      

       

       

      But, when I reload the page all rows has the same background color (odd-color) and the mouse events works.

      If I remove:

      <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />

      <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

      and reload the page the page has the zebra style and the mouse events works. But when I sort or filter the columns the mouse events stops to works.

      How can I solve this problem?

       

      Thanks

        • 1. Re: rich:dataTable zebra style
          raymoncalderon

          Hi:

          Try with following code:

           

          1. <rich:jQuery selector="#datatable tr:odd" query="addClass('odd-row')" /> 
          2. <rich:jQuery selector="#datatable tr:even" query="addClass('even-row')" /> 
          3. <rich:jQuery selector="#datatable tr" event="mouseover" query="live('mouseover',function(){jQuery(this).addClass('active-row')})" /> 
          4. <rich:jQuery selector="#datatable tr" event="mouseout" query="live('mouseout',function(){jQuery(this).removeClass('active-row')})" />


          I hope to help you


          Regards


          Raymon


          • 2. Re: rich:dataTable zebra style
            morellik

            Sorry but doesn't work.

            Applying you suggestion all rows has the same background color. If I remove the first two lines I have the zebra but doesn't work the mouseover event.