8 Replies Latest reply on Jul 18, 2012 4:05 AM by Matija Vizintin

    rich:dataTable highlight rows on click and when hovering

    Chris Werner Newbie

      Hi everybody,

      I would like to highlight my rows in a rich:dataTable when I click on a row.
      When I click on a different row that one should be highlighted while the former gains its original bgcolor.

      I can achieve the first part by setting the following attribute:
      onRowClick="this.style.backgroundColor='#b4d6e6'"

      Of course this highlights every row I click on without setting the bgcolor of the previously selected row back to its original bgcolor.

      I know that rich:extendedDataTable lets me select and highlight one or more rows but I explicitly want to use the rich:dataTable element because the extendedDataTable offers too many features I do not want and also requires a fixed height and is scrollable.

      This is my first priority. If possible I would additionally add a hovering effect. This can be achieved by the following attributes:

      onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
      onRowMouseOut="this.style.backgroundColor='#FFFFFF"

      BUT it should not delete the color I set by the selection (onRowClick event)!

      I'm sure there is a simple way to do it as this behavior is standard in many applications (and maybe also web applications) but I cannot figure it out.

      Thank you very much for your help!
      Chris