In my previous tutorials, I’d explained how to get gridview selected row hiddenfield value using jquery, how to bind asp.net gridview, print gridview data on print button click and other more cracking tutorials on GridView, Asp.net here.
Now here in this tutorial, I’ll explain how you can highlight asp.net gridview row on mouse hover or give style to using css3 pseudo selector from client-side using jQuery in asp.net with example code and step by step guide.
You can highlight grid view row in many ways but here in this tutorial I’ll explain two common ways to do the job.
Method 1 – Highlight Asp.net GridView Row By Using CSS3 Pseudo Code
By using this method, you don’t need to use jQuery (that is Method – 2). Using a css :hover pseudo selector would do the job for you.
{
background-color: #f5f5f5;
cursor: pointer;
}
Method 2 – Highlight Asp.net GridView Row By Using jQuery .hover Event
To use this method, you need to first add the highlight class in style section of your .aspx page:
{
background-color: #f5f5f5;
cursor: pointer;
}
After that add the following jQuery script in script section of your .aspx page:
</script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#grdResult tr’).hover(function () {
$(this).addClass(‘highlight’);
}, function () {
$(this).removeClass(‘highlight’);
});
});
</script>
HTML Markup Code To Highlight Asp.net GridView Rows – [.aspx]
Here is the complete HTML markup code to highlight asp.net gridview row that I used for this demonstration in my .aspx page:
<head id=”Head1″ runat=”server”>
<title>Highlight gridview rows on mouse hover in asp.net using
c# or vb.net</title>
<style type=”text/css”>
/*Method:1 – you don’t need to use jQuery, using a css ‘:hover’ pseudo selector
would do the job.
#grdResult tr:hover
{
background-color: #f5f5f5;
cursor: pointer;
}*/
.highlight
{
background-color: #f5f5f5;
cursor: pointer;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#grdResult tr’).hover(function () {
$(this).addClass(‘highlight’);
}, function () {
$(this).removeClass(‘highlight’);
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<h4>
Highlight gridview rows on mouse hover in asp.net</h4>
<asp:GridView ID=”grdResult” runat=”server” AutoGenerateColumns=”false”>
<HeaderStyle Font-Bold=”true” BackColor=”#9a9a9a” BorderColor=”#222″
ForeColor=”White” Height=”30″ />
<Columns>
<asp:BoundField DataField=”SubjectName” ItemStyle-HorizontalAlign=”Center”
HeaderText=”Subject Name” ItemStyle-Width=”200″ />
<asp:BoundField DataField=”Marks” HeaderText=”Marks” ItemStyle-Width=”200″
ItemStyle-HorizontalAlign=”Center” />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
After adding HTML markup to .aspx page, we need to bind asp.net grid view. So choose your language (that is C# or Vb.net) and paste it to your code-behind file.
Binding Asp.net GridView Using C# – [.cs]
Now add the following namespace:
After that add the following code to .aspx.cs page:
{
if (!IsPostBack)
{
LoadResultData();
}
}
private void LoadResultData()
{
DataTable dt = new DataTable();
//Creating Column
dt.Columns.Add(“SubjectId”);
dt.Columns.Add(“SubjectName”);
dt.Columns.Add(“Marks”);
//Adding Results in rows
dt.Rows.Add(1, “Asp.net”, 95);
dt.Rows.Add(2, “C#”, 88);
dt.Rows.Add(3, “Vb.net”, 78);
dt.Rows.Add(4, “HTML”, 89);
dt.Rows.Add(5, “CSS”, 90);
dt.Rows.Add(6, “JavaScript”, 85);
dt.Rows.Add(7, “jQuery”, 96);
//Binding Results to gridview
grdResult.DataSource = dt;
grdResult.DataBind();
}
Binding Asp.net GridView Using Vb.net – [.vb]
Now add the following namespace:
After that add the following code to .aspx.vb page:
If Not IsPostBack Then
LoadResultData()
End If
End Sub
Private Sub LoadResultData()
Dim dt As New DataTable()
‘Creating Column
dt.Columns.Add(“SubjectId”)
dt.Columns.Add(“SubjectName”)
dt.Columns.Add(“Marks”)
‘Adding Results in rows
dt.Rows.Add(1, “Asp.net”, 95)
dt.Rows.Add(2, “C#”, 88)
dt.Rows.Add(3, “Vb.net”, 78)
dt.Rows.Add(4, “HTML”, 89)
dt.Rows.Add(5, “CSS”, 90)
dt.Rows.Add(6, “JavaScript”, 85)
dt.Rows.Add(7, “jQuery”, 96)
‘Binding Results to gridview
grdResult.DataSource = dt
grdResult.DataBind()
End Sub
Example Result
