A couple of months ago I’ve written a simple demo about “Highlighting GridView Row on MouseOver”. I’ve noticed many members in
the forums (http://forums.asp.net) 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 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
the gridview you can refer this post: Binding GridView with Data
the ADO.Net way or this one: GridView Custom Paging with LINQ. To get started 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 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 persist
the settings we will use some HiddenFields control to store
the data so that when it postback we can reference
the value from there.
Now here’s
the JavaScript functions below:
<asp:content id="Content1" runat="server" contentplaceholderid="HeadContent">
<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>
</asp:content>
The ChangeRowColor() is
the 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 function. This function 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!
Technorati Tags: jQuery,GridView,JavaScript,TipTricks
