File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Mohamad Norouzi
Greenhorn
Posts: 18
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 16
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 2
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 97
Java MyEclipse IDE Ubuntu
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Taken from richfaces example:
 
Don't get me started about those stupid light bulbs.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic