highlight row on mouse over in a Gridview

Posted on 2007-08-06
Last Modified: 2013-11-05
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

any ideas  where the problem is n how can we fix it
i will appericate
I am using
Question by:mmalik15
    LVL 30

    Expert Comment

    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
    LVL 11

    Accepted Solution


    Found this tutorial. Code is very similar but uses javascript to change the background color of the row instead of the css class.

    LVL 27

    Expert Comment

    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
    LVL 10

    Expert Comment

    by: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)

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

    Expert Comment

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

        function mouseovercolorchange(ID)
        function mouseoutcolorchange(ID)

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    ASP.NET MVC Create/Edit ViewModel 7 52
    firstChar challenge 13 57
    Javascript newbie 5 31
    make top menus bigger font 3 25
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    A short article about problems I had with the new location API and permissions in Marshmallow
    Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now