Highlight GridView Row On Click And Retain Selected Row On Postback

Many years ago, I wrote a simple demo about “Highlighting GridView Row on MouseOver”. I’ve noticed many members in the forums are asking, how to highlight the row in GridView and retain the selected row across Postbacks. Hence, I’ve decided to write this post to demonstrate how to implement it as a reference to those who might need it.

In this demo, I’m going to use a combination of plain JavaScript and jQuery to do the client-side manipulation. I presume that you already know how to bind the grid with the data because I will not include the codes for populating the GridView. For binding a GridView, you can refer to this post: Binding GridView with Data the ADO.Net Way or this one,

• GridView Custom Paging with LINQ.

Now, let’s implement the highlighting of GridView row on the row click and retain the selected row on Postback. For simplicity, I set up the page, as shown below:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>You have selected Row: (<asp:Label ID="Label1" runat="server" />)</h2>
    <asp:HiddenField ID="hfCurrentRowIndex" runat="server"></asp:HiddenField>
    <asp:HiddenField ID="hfParentContainer" runat="server"></asp:HiddenField>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Trigger Postback" />
    <asp:GridView ID="grdCustomer" runat="server" AutoGenerateColumns="false" onrowdatabound="grdCustomer_RowDataBound">
        <Columns>
            <asp:BoundField DataField="Company" HeaderText="Company" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Title" HeaderText="Title" />
            <asp:BoundField DataField="Address" HeaderText="Address" />
        </Columns>
    </asp:GridView>
</asp:Content>

Note

Since the action is done at the client-side, when we do a Postback (clicking on a button), the page will be re-created and you will lose the highlighted row. This is normal because the Server doesn't know anything about the Client/Browser, unless you do something to notify the Server that something has changed. To retain the settings, we will use some HiddenFields control to store the data so that when it does Postback, we can reference the value from there.

Here are the JavaScript functions, given below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    var prevRowIndex;

    function ChangeRowColor(row, rowIndex)
{
        var parent = document.getElementById(row);
        var currentRowIndex = parseInt(rowIndex) + 1;

        if (prevRowIndex == currentRowIndex)
        {
            return;
        } else if (prevRowIndex != null)
        {
            parent.rows[prevRowIndex].style.backgroundColor = "#FFFFFF";
        }

        parent.rows[currentRowIndex].style.backgroundColor = "#FFFFD6";
        prevRowIndex = currentRowIndex;

        $('#<%= Label1.ClientID %>').text(currentRowIndex);

        $('#<%= hfParentContainer.ClientID %>').val(row);
        $('#<%= hfCurrentRowIndex.ClientID %>').val(rowIndex);
    }

    $(function()
      {
        RetainSelectedRow();
    });

    function RetainSelectedRow()
    {
        var parent = $('#<%= hfParentContainer.ClientID %>').val();
        var currentIndex = $('#<%= hfCurrentRowIndex.ClientID %>').val();
        if (parent != null)
        {
            ChangeRowColor(parent, currentIndex);
        }
    }
</script>

The ChangeRowColor() is a function that sets the background color of the selected row. It is also, where we set the previous row and rowIndex values in HiddenFields. The $(function(){}); is a short-hand for the jQuery document.ready event. This event will be fired, once the page is posted back to the Server due to which we called the function RetainSelectedRow(). The RetainSelectedRow() function is  where we referenced the current selected values stored from the HiddenFields and passed these values to the ChangeRowColor() function to retain the highlighted row.

Finally, here’s the code behind part:

protected void grdCustomer_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onclick", string.Format("ChangeRowColor('{0}','{1}');", e.Row.ClientID, e.Row.RowIndex));
    }
}

The code given above is responsible for attaching the JavaScript on click event for each row, calling the ChangeRowColor() function, passing the e.Row.ClientID and e.Row.RowIndex to the function.

Here’s the sample output, given below: