FAQ: Highlight GridView Row on Click and Retain Selected Row on Postback

Introduction

Many years ago I’ve written a simple demo about “Highlighting GridView Row on MouseOver”. I’ve noticed many members in the forums are asking how to highlight row in GridView and retain the selected row across postbacks. So I’ve decided to write this post to demonstrate how to implement it as reference to others 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 presumed that you already know how to bind the grid with data because I will not include the codes for populating the GridView here. For binding a GridView, you can refer this post: Binding GridView with Data the ADO.Net Way or this one: GridView Custom Paging with LINQ.

Using the code

Now let’s implement the highlighting of GridView row on row click and retain the selected row on postback.  For simplicity I set up the page like this:

<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 like (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 not unless if 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 postback we can reference the value from there.

Here are the JavaScript functions below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" />
<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 that’s why we call the function RetainSelectedRow(). The RetainSelectedRow() function is where we referenced the current selected values stored from the HiddenFields and pass 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 above is responsible for attaching the JavaScript onclick event for each row and call the ChangeRowColor() function and passing the e.Row.ClientID and e.Row.RowIndex to the function.

Here’s the sample output below:

That's it! I hope someone find this post useful.