1 Reply Latest reply on Mar 13, 2013 6:58 AM by dageisz

    ExtendedDataTable - How to enable hover highlighting with multi select enabled?

    xhead65

      I'd like to use an extendedDataTable to allow users to select one or more items from a list, so it just needs to be a single column table with multi select enabled, nothing fancy.

       

      This was super easy to do, but now I want to enhance the table to highlight rows onmouseover. I've tried a suggestion I've found on another thread:

       

         <rich:extendedDataTable

         value="#{gvsDetail.tests}" var="test" id="edtfilterTests"

         width="280px" height="400px"

         selectionMode="multi"

         enableContextMenu="false"

         onRowMouseOver="this.style.backgroundColor='#F1F1F1'"

         onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"> <!-- selection="" -->

         <rich:column

          sortable="false"

          label="TestsLabel"

          id="TestsId"

          width="100%">

          <f:facet name = "header">

           <h:outputText>Tests</h:outputText>

          </f:facet>

          <h:outputText value="#{test.name}"/>

         </rich:column>

       

      The above DOES enable highlighting on hover, but now selected rows are no longer highlighted (probably because the onRowMouseOut event overrides the selection color).

       

       

      I've tried a number of things, with no luck. I think I need to do something like:

        onRowMouseOver="if(!this.isSelected) highlightrow;"

         onRowMouseOver="if(!this.isSelected) unhightlightrow;"

       

       

      Any suggestions?

        • 1. Re: ExtendedDataTable - How to enable hover highlighting with multi select enabled?
          dageisz

          Although it's a bit late it may help others:

           

          the best solution would be to use css styling.

           

          define a row class:

          .myrow{
              /* insert your default row style here - for your example: */
              backgroundColor: #{a4jSkin.tableBackgroundColor};
          }
          .myrow:HOVER{
              backgroundColor: #F1F1F1;
          }
          

          in order to activate it use

           <rich:extendedDataTable ... rowClasses="myrow"> ... </rich:extendedDataTable>

          As a hint: this will work only partialy if you are using fixed columns, as the fixed and the not-fixed columns are rendered in separate tables and thus have no connections on hovering.

          After all you javascript solution doesnt work either, at least not in this simple way.