how to highlight a row in h:datatable when mouse over it

[Mohamad Norouzi]

Hi,

actually I have two question, first how to highlight the row of data table when the mouse goes over it. I am used both h:dataTable and t:dataTable but I couldnt do that.

and second, how to fire an action method with javascript, I want when user click on a row of a dataTable the application identify the selected row and go to next page.

Thank you so much

[Sudeep Agrawal]

Did you find a solution for this ? I am looking for a similar solution where I can toggle the color of each row in the data table !

[Amit Nair]

There is a built in component(rich:datatable) with the effect of change in row color on mouse over. This is ajaxified & support to nested tables is also provided.

http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=dataTable

Code Snippet:---

rich:dataTable 

has attributes like onRowMouseOver, onRowMouseOut

[Munish K Singh]

Hi,

you can use below code to highlight table row in data table.



<script type="text/javascript">
function onCommunicationMouseOver(selectedRow,isMouseOver) {
var selectedColId = selectedRow.id;
var subId = selectedColId.substring(0,selectedColId.lastIndexOf(":"));
var selectedObjectId = document.getElementById(subId+":referenceNoLink");

if(isMouseOver){
selectedObjectId.parentNode.parentNode.parentNode.className = 'portlet-table-selected portlet-form-field-label';
}else{
selectedObjectId.parentNode.parentNode.parentNode.className = 'portlet-table-body portlet-form-small';
}
}
</script>


DATA TABLE IN JSP =====>

<hx:dataTableEx id="commnResultsSummaryList"
value="#{abcBean.abcList}"
var="abcDetailList"
headerClass="portlet-table-header portlet-form-small"
footerClass="portlet-table-footer portlet-form-small"
columnClasses="portlet-table-body portlet-form-small" border="0"
cellpadding="2" cellspacing="0" width="98%">

<hx:columnEx width="18%">
<hx:requestLink styleClass="requestLink" id="referenceNoLink"
onmouseover="onCommunicationMouseOver(this,true);" onmouseout="onCommunicationMouseOver(this,false);"
action="#{abcController.actionAbc}">
<hutputText id="resultRefNumber" value="#{abcDetailList.referenceNo}" />
<f:param value="#{abcDetailList.referenceNo}" name="paramRefNumber" />
</hx:requestLink>
</hx:columnEx>
</hx:dataTableEx>

[Akaine Harga]

Taken from richfaces example:

<rich:dataTable id="contactsDataTable" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
	onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
	cellpadding="0" cellspacing="0" width="200" border="0" 
	value="#{mbean.property}" var="propertyAlias">
	...