alternate row color w/onmouseover,onmouseout

I'm trying to use the onmouseover and onmouseout event without success, using the following command

obj.setEvent("onmouseover", function(){this.getTemplate("row", 0).setStyle("background-color", "red")});

It's correct or I need to use another function?

Thanks for your help

Mouseover effects require special handling to be fast enough. There are two global functions available just for this purpose (bottom of /lib/system/html.js):
function mouseover(element, name){...}
function mouseout(element, name){...}
The first one adds a CSS class selector 'name' to the HTML element, the second removes it.

To create mouseover effect you need first to define a CSS class:

<style>
.active-row-highlight {background-color: threedshadow}
.active-row-highlight .active-row-cell {background-color: threedshadow}
</style>

and add the following script:

var row = obj.getTemplate("row");
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");

This is slightly different from normal syntax - where you supply a function as an event handler. Here instead of a function you provide a string which is simply assigned to HTML element "onmouseover" property and is evaluated on mouseover event.

This is not a generic solution but is necessary to make things faster.

Sorry for being slow documenting all these features.

Hi,

Thank you very very much for your help!!

ASAP, I'll try to learn how to work each grid function

This works, but if I freeze the first column, the onmouseover/onmouseout can't highlight the first freezing column....

I needed to add a vertical-align:middle to row mouseover styles.

<style>
.active-row-highlight {background-color: threedshadow:vertical-align:middle;}
.active-row-highlight .active-row-cell {background-color: threedshadow;vertical-align:middle;}
</style>

Now when I mouseover I get a lens affect (as text shifts a few pixels up and down). This happens in ie but not Firefox.

What are the base styles I need to change to eliminate this?