Highlight GridView Row on Mouse Hover in ASP.NET
Introduction
Being as an ASP.NET guy, I always wish to deliver the best apps
to the client so that they call WOW!! If you want to highlight the row when
user hover the mouse, in this post we are going to do the same using jQuery.
Look at the screenshot example.
So, let’s start developing such system.
First of all you need to add the reference of your jQuery file
in the <head> area. In my case I’m using master page so, I’ll place it in
ContentPlaceHolder.
<script src="../../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
Now you need to place the jQuery method to apply it in grid view.
Here is the method code that I’m using.
<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" }); }
);
});
</script>
In above code I’m using two different color codes one for ‘on
mouse hover color’ and another for non-hover. Now look at the complete code
that I’ll be using.
Complete Code
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Profile_Office_UpdateContact_EmailID_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script src="../../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<%--Mouse Hover Highlighter--%>
<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" }); }
);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
Update Student
Information
</h2>
<br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Profile/Office/2012/Default.aspx">Back</asp:HyperLink>
<br /><br />
<div style="font-size:8.5px; color:Black;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1"
EmptyDataText="There
are no data records to display."
AllowSorting="True" Width="677px" BackColor="White" BorderColor="White"
BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"
GridLines="None">
<Columns>
<asp:CommandField ShowEditButton="True" ShowSelectButton="True" />
<asp:BoundField DataField="rollnumber" HeaderText="Roll"
SortExpression="rollnumber" />
<asp:BoundField DataField="candidatename" HeaderText="Name"
SortExpression="candidatename" />
<asp:BoundField DataField="programname" HeaderText="Program"
SortExpression="programname" />
<asp:BoundField DataField="semester" HeaderText="Semester"
SortExpression="semester" />
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$
ConnectionStrings:ASPNETDBConnectionString1 %>"
DeleteCommand="my
delete cmd"
InsertCommand="my
insert cmd"
ProviderName="<%$ ConnectionStrings:ASPNETDBConnectionString1.ProviderName %>"
SelectCommand="my
select cmd"
UpdateCommand="my
update cmd>
<DeleteParameters>
<asp:Parameter Name="id" Type="Int64" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="rollnumber" Type="String" />
<asp:Parameter Name="formnumber" Type="String" />
<asp:Parameter Name="programname" Type="String" />
<asp:Parameter Name="candidatename" Type="String" />
<asp:Parameter Name="semester" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="rollnumber" Type="String" />
<asp:Parameter Name="formnumber" Type="String" />
<asp:Parameter Name="programname" Type="String" />
<asp:Parameter Name="candidatename" Type="String" />
<asp:Parameter Name="semester" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
</asp:Content>
I hope you like it. Thanks.
Nice code. It worked great where other samples failed!
ReplyDeleteAny thoughts on not interfering with an alternating row color?
ReplyDelete