|
Using ASP.NET and jQuery to Highlight a Row in GridView without a PostBack
|
|
Rating: 23 user(s) have rated this article
Posted by:
Suprotim Agarwal,
on 12/30/2008,
in category "jQuery and ASP.NET"
Views: this article has been read 57023 times
Abstract: In one of our previous articles, we had seen how to highlight a row in GridView using JavaScript without causing a postback. In this article, we will simplify the approach using jQuery, without the need of handling any of the GridView events.
Using ASP.NET and jQuery to Highlight a Row in GridView without a PostBack
In this article, we will simplify the approach using jQuery, without the need of handling any of the GridView events. If you are new to jQuery, I would strongly suggest you to check this: Using jQuery with ASP.NET - A Beginner's Guide
Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.
Now drag and drop the jquery-1.2.6.js file from the Solution Explorer to the <head> section of your page to create a reference as shown below:
<head runat="server">
<title></title>
<script src="Script/jquery-1.2.6.js" type="text/javascript"></script>
Drag and drop a SqlDataSource Control to the Default.aspx page and use the wizard to connect to the Northwind database. Select the CustomerId, CompanyName, ContactName, Address and City from the Customers table. The wizard will also prompt you to save the connection string in the web.config file. Choose to do so. The design code will look similar to the following:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]">
</asp:SqlDataSource>
An entry will be added to the web.config file as shown below:
<connectionStrings>
<add name="NorthwindConnectionString"
connectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
Now add a GridView control to the page and using the smart tag, select the DataSource to be SqlDataSource1 in the GridView tasks panel. Using the same panel, click on the Enable Paging and Enable Sorting checkboxes. The source will look similar to the following. Observe that the DataKeyNames is set to ‘CustomerId’, that is the primary key of the Customers table
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
</asp:GridView>
To enable row highlighting, we will follow two approaches. In the first approach we will make the GridView generate the <thead> so that the header is not highlighted. GridView by default generates the header as a <th> inside a <tr>.
First Approach
All we need to do is to add the following lines of jQuery code in the <head> section of the page
<script type="text/javascript">
$(document).ready(function() {
$("table tr:has(td)").css({ background: "ffffff" }).hover(
function() { $(this).css({ background: "#C1DAD7" }); },
function() { $(this).css({ background: "#ffffff" }); }
);
});
</script>
We have used the ‘hover’ event in jQuery. More about the hover event can be read over here.
In order to prevent the Column Header to be highlighted, use the following code to generate the <thead>:
C#
if (GridView1.Rows.Count > 0)
{
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
//GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
VB.NET
If GridView1.Rows.Count > 0 Then
GridView1.UseAccessibleHeader = True
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
'GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
End If
The code above generates the <thead> tag for us instead of generating the <th> in the <tr> (which is the default html generated). I have on purpose commented out the FooterRow code, since it gives me a strange error. I have used a second approach to solve that to a certain extent. Read on.
Second Approach
If you do not want to write all that code to generate the <thead> and then filter it out, here's a pure jQuery solution to it. I found this solution in a jQuery forum where a user had posted a similar issue. Karl Swedberg proposed the solution as given below. Add the following lines of jQuery code in the <head> section of the page:
<script type="text/javascript">
$(document).ready(
function() {
$(
"tr").filter(function() {
return $('td', this).length && !$('table', this).length
}).css({ background:
"ffffff" }).hover(
function() { $(this).css({ background: "#C1DAD7" }); },
function() { $(this).css({ background: "#ffffff" }); }
);
});
That’s it. Run the application and you will observe that the row gets highlighted when the user hovers the mouse on a row.
I hope this article was useful and I thank you for viewing it.
Give me a +1 if you think it was a good article. Thanks!