You must Sign In to post a response.
  • Category: JavaScript

    Highlight gridview row on mouseoverevent

    I would like to highlight the gridview row with lightgreen color on mouseover event using javascript/jquery. I mean after grid loads, whatever the row I hoover the mouse corresponding row should change color to lightgreen. How to achieve this from client side? Please help me.
  • #764343
    Hai Chinnari,
    You can use the css style and JavaScript or JQuery to do this.
    Create a function which will get called when the mouse hover on the GridView Row. Attach a css style when the mouse is hover and remove that style when the mouse is out from the row.
    Below is the links which will have the code snippet to do the same. You just need to copy and paste it, change the name of the GridView and it will work:

    http://www.aspsnippets.com/Articles/Highlight-GridView-Row-on-mouseover-using-jQuery.aspx
    http://www.dotnetfunda.com/articles/show/2411/highlight-gridview-rows-using-jquery-on-mouse-over
    http://stackoverflow.com/questions/14020756/hightlight-gridview-rows-on-mouseover

    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #764348
    Hi chinnari,

    Try following:
    1) add this css
    <style>
    #GridViewId tr.rowHover:hover
    {
    background-color: Yellow;
    }
    </style>
    2) assign above css to GridView RowStyle property as
    <asp:GridView runat="server" ID="GridViewId" RowStyle-CssClass="rowHover"></asp:GridView>

    Hope it helps.

    Regards,
    Shashikant Gurav[Programmer II]
    shashikantgurav22@gmail.com


Sign In to post your comments