Using Active.Templates.Image with onmouseover

I have a grid with a list of filenames in it. I want to make it easier for the user by highlighting the row that the mouse is currently over.

My issue is that if I use the RowTemplate method to highlight the current row, I loose the graphics associated with the filetype.

My code is currently as follows ( please don't laugh )...

var fwdocgrid = new Active.Controls.Grid;
docgrid.setId('docgrid');

var openfile = function(){
index = this.getProperty('selection/index');
href = './pdfs/' + this.getDataText(i,0) + '.' + this.getDataText(i,4);
};

docgrid.setColumnTemplate(new Active.Templates.Image, 0);
docgrid.setColumnProperty("count", 3);
docgrid.setColumnProperty("texts" , ["Name", "Size", "Type", "Date Modified"]);
docgrid.setColumnHeaderHeight("20px");
docgrid.setRowProperty("count", docs.length );
docgrid.setRowHeaderWidth("0px");
docgrid.setDataProperty("text", function(i, j){return docs[i][j]});
docgrid.setDataProperty("image", function(i, j){return docs[i][4]});
docgrid.setDataProperty("index", function(i){return './docs/'+docs[i][0]+'.'+docs[i][4]});
docgrid.setAction("dblclick",function (src){window.location.href=src.getItemProperty("index")});
var filerow = new Active.Templates.Row;
filerow.setEvent("onmouseover","mouseover(this, 'active-row-highlight')");
filerow.setEvent("onmouseout","mouseout(this, 'active-row-highlight')");
docgrid.setTemplate("row",filerow);
document.write(docgrid);

Err... help!

Thanks

OK, I solved it. the line

docgrid.setDataProperty("index", function(i){return './docs/'+docs[i][0]+'.'+docs[i][4]});

Was causing greif with the background colour scheme