Javascript OnMouseOver Highlight Select Colour GridView Row Asp.Net C# VB.Net

Asp.net GridView gives us huge facility that we can’t imagine few years ago. But still we have a lot of chance to improve look & feel as well as GridView functionality. Here in this article i will describe how you can highlight a gridview row when move the mouse over the row and also how to retain the original background color when user leaves the mouse from a row or in mouseout event. After googling i found a lot of series on Gridview row highlighting issues but unfortunately most of them uses style sheet to change GridView row colour. But my observation is if you strict on using CSS to highlight GridView row then you will face difficulties when your Grid contains different background color for rowstyle and alternative rowstyle. I hope you will not face this problem if you use my technique. In a small quote i can say that how i can do this. First when user moves mouse pointer over the row then at first i copied the rows original color & then change the color to highlight the rows using javascript. And when user leaves the row or mouseout then i assign the previously copied color as row backgroud using javascript. So if your gridview contains different color for different row style highlight will works nicely.

As you knew that Gridview won’t gives us the highlighting facility by default but we can achieve highlighting functionality by using simple javascript. To do that we need to use two javascript event. The one is onmouseover event which is also termed as Mouse Hover effect. The another one is onmouseout event. By using this two strong javascript events we will highlight our GridView rows. Ok now we know which javascript event we will use but how we can add these two javascript event handler with our GridView rows? The answer is simple. GridView gives us an event named RowCreated which we can use to bind javascript event with our GridView rows. Let’s look how we can do this.

Now add a GridView in HTML Markup Like Below:

<asp:GridView ID="GridView_Products" runat="server" AutoGenerateColumns="False" 
            Width="60%" Font-Names="tahoma" onrowcreated="GridView_Products_RowCreated">
        <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
        <RowStyle BackColor="Silver" />
        <AlternatingRowStyle BackColor="LightGray" />
        <SelectedRowStyle BackColor="Pink" ForeColor="White" Font-Bold="true" />
        <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:BoundField DataField="Colour" HeaderText="Color" />
        <asp:BoundField DataField="Size" HeaderText="Size" />
        <asp:CommandField ShowSelectButton="True" />
        </Columns>
</asp:GridView>

Now bind some Sample Data to the GridView under Page_Load Event:
C# Code:

        if (!IsPostBack)
        {
            DataTable oTable = new DataTable("Product");

            oTable.Columns.Add(new DataColumn("Name", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Description", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Colour", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Size", typeof(System.String)));


            oTable.Rows.Add("Lux", "100% Halal Soap", "White","Family");
            oTable.Rows.Add("Close-up", "Toothpaste", "Green", "Standard");
            oTable.Rows.Add("GP Modem", "Internet Modem", "Black/Blue", "Standard");
            oTable.Rows.Add("Data SIM", "Subscriber identity module", "N/A", "General");
            oTable.Rows.Add("Tibbet Soap", "Special Soap", "White", "Regular");
            oTable.Rows.Add("Tibbet Pomed", "For Winter Only", "Yellow", "Single");
            oTable.Rows.Add("Bubble", "Unknown", "N/A", "Normal");

            GridView_Products.DataSource = oTable;
            GridView_Products.DataBind();
        }

VB.Net Code:

        If Not IsPostBack Then
            Dim oTable As DataTable = New DataTable("Product")

            oTable.Columns.Add(New DataColumn("Name", System.Type.GetType("System.String")))
            oTable.Columns.Add(New DataColumn("Description", System.Type.GetType("System.String")))
            oTable.Columns.Add(New DataColumn("Colour", System.Type.GetType("System.String")))
            oTable.Columns.Add(New DataColumn("Size", System.Type.GetType("System.String")))


            oTable.Rows.Add("Lux", "100% Halal Soap", "White", "Family")
            oTable.Rows.Add("Close-up", "Toothpaste", "Green", "Standard")
            oTable.Rows.Add("GP Modem", "Internet Modem", "Black/Blue", "Standard")
            oTable.Rows.Add("Data SIM", "Subscriber identity module", "N/A", "General")
            oTable.Rows.Add("Tibbet Soap", "Special Soap", "White", "Regular")
            oTable.Rows.Add("Tibbet Pomed", "For Winter Only", "Yellow", "Single")
            oTable.Rows.Add("Bubble", "Unknown", "N/A", "Normal")

            GridView_Products.DataSource = oTable
            GridView_Products.DataBind()
        End If

Now add the GridView RowCreated Event Like Below:
C# Code:

    protected void GridView_Products_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // When user moves mouse over the GridView row,First save original or previous color to new attribute,
            // and then change it by magenta color to highlight the gridview row.
            e.Row.Attributes.Add("onmouseover", "this.previous_color=this.style.backgroundColor;this.style.backgroundColor='Magenta'");

            // When user leaves the mouse from the row,change the bg color 
            // or backgroud color to its previous or original value  
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.previous_color;");
        }
    }

VB.Net Code:

    Protected Sub GridView_Products_RowCreated(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView_Products.RowCreated
        If e.Row.RowType = DataControlRowType.DataRow Then
            'When user moves mouse over the GridView row,First save original or previous color to new attribute,
            'and then change it by magenta color to highlight the gridview row.
            e.Row.Attributes.Add("onmouseover", "this.previous_color=this.style.backgroundColor;this.style.backgroundColor='Magenta'")

            'When user leaves the mouse from the row,change the bg color 
            'or backgroud color to its previous or original value  
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.previous_color;")
        End If

    End Sub

Now run the project & hope you will get output like below:
Javascript_Onmouseover_Highlight_GridViewRow_csharp_VB.Net

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code