rich:dataTable highlight rows on click and when hovering

[bartholodeus]

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

[ilya_shaikovsky]

1) you should just store the selected td element in some js var and on other row click change its styling back.
2) just add proper if statement.

b.t.w. just html/css/js question... there are answers around the web on the proper resources. Just few random links from our bestr friend google :)
http://www.htmlhelpcentral.com/messageboard/showthread.php?t=9140
http://www.permadi.com/tutorial/cssHighlightTableRow/index.html

[svande]

<rich:jQuery selector="#contractsReport tr"
 query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
 <rich:jQuery selector="#contractsReport tbody tr"
 query="click(function(){jQuery(this.siblings()).removeClass('selected-row');jQuery(this).addClass('selected-row')})"/>

[anonyin]

Wilfred,

Can you give the complete code for this please, including the dataTable, I am not familiar with jQuery so not sure where to add this snippet you have provided. Thanks for your help.

Thanks

Kiran.

[anonyin]

Wilfred,

I could get it to work but  siblings() function is not working. Its complaining as it is(siblings()) not supported. Any idea ?

Thanks

Kiran.

[colingaj]

I think there was a small typo. It should be:

<rich:jQuery selector="#contractsReport tbody tr"
query="click(function(){jQuery(this).siblings().removeClass('selected-row');jQuery(this).addClass('selected-row')})"/>

Correction is highlighted and underlined.

[gangadharivv]

Why dont you use extended table by disabling the un-necessary features

[ilya_shaikovsky]

I guess because it's still more heavyweight for simplest cases. Easier to add selection to dataTable.

[croco]

Solution that worked for me, might be useful for someone. I have a zebra table using rowClasses="rowOdd, rowEven"

Hovering effect:

.rich-table-row:hover {

    background-color: ROW_COLOR;

}

Row selection:

.row-selected {

    background-color: ROW_COLOR;

}

<rich:jQuery selector="#TABLE_ID tbody tr:even" query="click(function(){jQuery(this).siblings().removeClass('row-selected');jQuery(this).removeClass('rowEven');jQuery(this).addClass('row-selected')})"/>

<rich:jQuery selector="#TABLE_ID tbody tr:odd" query="click(function(){jQuery(this).siblings().removeClass('row-selected');jQuery(this).removeClass('rowOdd');jQuery(this).addClass('row-selected')})"/>

This two tags go under the <rich:table> as described in http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html