asked on

highlight row on mouse over in a Gridview

i have databound gridview. i want to highlight a row on mouse over. I have tried different codes from online examples but they dont work . The code i have used is

Protected Sub GvEmployee_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GvEmployee.RowCreated

If (e.Row.RowType = DataControlRowType.DataRow) Then
e.Row.Attributes.Add("onmouseover", "this.className='hightlighrow'")
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'")
End If

End Sub

and my css is like

.normalrow
{
background-color:white;

}
.hightlighrow
{
background-color:#cccccc;
}
any ideas where the problem is n how can we fix it
i will appericate
I am using Vb.net

VirusMinus

load your page in the browser and then do a view source of this table.

copy paste the code here.

sometimes it could be javascript's case sensitivity.

try onMouseOut and onMouseOver

ASKER CERTIFIED SOLUTION

cmhunty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sammy

I would use the RowDataBound instead of the RowCreated event of the grid view
move your code as it is to the RowDataBound and it should work Ok
I dont see any problem with the logic or the css class
one more thing you can look at is viewing the source code when you run the app

Good luck
Sammy

Alpesh Patel

Protected Sub grdFileStatus_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdFileStatus.RowDataBound

If e.Row.RowIndex >= 0 Then
e.Row.Attributes.Add("ID", "GridView1Row" & e.Row.RowIndex)
e.Row.Attributes.Add("onMouseOver", "mouseovercolorchange(" & e.Row.RowIndex & ")")
e.Row.Attributes.Add("onMouseOut", "mouseoutcolorchange(" & e.Row.RowIndex & ")")
End If
end sub

-------------------------------------------------------------------------------------------------------------------------

now use that customize function
mouseovercolorchange(ID of the row)
{
document.getElementById(ID).class="AAAAAA";
}

this must work....... becouse this is the direct code i give u from my runing project

cmhunty

Small amendment for last comment in open discussion. Should be .className in javascript so should look like:

function mouseovercolorchange(ID)
{
document.getElementById(ID).className="over";
}
function mouseoutcolorchange(ID)
{
document.getElementById(ID).className="";
}