wood burning stoves 2.0*
The moose likes JSF and the fly likes how to highlight a row in h:datatable when mouse over it Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "how to highlight a row in h:datatable when mouse over it" Watch "how to highlight a row in h:datatable when mouse over it" New topic
Author

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

Mohamad Norouzi
Greenhorn

Joined: Oct 12, 2004
Posts: 18
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


<a href="http://pixelshot.wordpress.com" target="_blank" rel="nofollow">http://pixelshot.wordpress.com</a><br /><a href="http://brainable.blogspot.com" target="_blank" rel="nofollow">http://brainable.blogspot.com</a>
Sudeep Agrawal
Ranch Hand

Joined: May 31, 2006
Posts: 34
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
Greenhorn

Joined: May 23, 2006
Posts: 16
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:---

has attributes like onRowMouseOver, onRowMouseOut
Munish K Singh
Greenhorn

Joined: Mar 10, 2004
Posts: 2
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
Ranch Hand

Joined: Nov 03, 2009
Posts: 71

Taken from richfaces example:


Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?
willCodeForFood("Java,PHP,C#,XML,VBS,XHTML,CSS,JavaScript,SQL"); //always looking for job opportunities in AU/NZ/US/CA/Europe :P
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: how to highlight a row in h:datatable when mouse over it
 
Similar Threads
HighLight Row in Select Box
Row highlight in a JTable
JPopupMenu or JMenu - neither is quite what I'm after.
Iterating in jsf
Javascript form.submit on table row