It looks really cool to highlight the gridview row on mouse
over. This help users to know he is on which row. So in this article I will
show you how you can highlight gridview Row on mouseover using css\css3 in asp.net
using c#.Net.
Some of my previous article are as follows: Binding
Gridview By Access DataBase Using C#.Net in Asp.Net, Bind
DataGridView In Windows Application Using C#, Code
to Export GridView to PDF in Asp.Net Using C# and Vb.Net, How
To Make a Single Row of DataGridview Bold Using C#.Net in Windows Application,
Drag
Drop Cells in GridView Control Using Asp.net C# and jQuery.
So for this article first we will create a new asp.net
application. In this article there are two things which responsible for highlighting
he row are css and c# code for assigning the style sheet to rows.
Style Sheet
|
<style type="text/css">
.normalrow
{
background-color:
white;
}
.onmouseoverrow
{
background-color:
gray;
}
</style>
|
C#.Net
|
/// <summary>
/// For hilighted and normal row
/// </summary>
/// <param
name="sender"></param>
/// <param
name="e"></param>
protected
void GridView1_RowCreated(object sender, GridViewRowEventArgs
e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
}
}
|
VB.Net
|
''' <summary>
''' For hilighted and normal row
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Protected Sub
GridView1_RowCreated(ByVal sender As Object, ByVal e As
GridViewRowEventArgs)
If
e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'")
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'")
End If
End Sub
|
In above code e have assign the class onmouseover and onmouseout
event. Now here is the completer code.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Highlight
GridView Row on Mouseover Using CSS in Asp.Net</title>
<style type="text/css">
.normalrow
{
background-color:
white;
}
.onmouseoverrow
{
background-color:
gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid" onrowcreated="GridView1_RowCreated">
<Columns>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:BoundField DataField="publication_year" HeaderText="PUBLISH
YEAR" />
<asp:BoundField DataField="retail_price" HeaderText="PRICE" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</form>
</body>
</html>
|
C#.Net code
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
namespace ProjectDemo_Asp.et
{
public partial class Default : System.Web.UI.Page
{
public
string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
_objdt = new DataTable();
_objdt = GetDataFromDataBase();
if
(_objdt.Rows.Count > 0)
{
GridView1.DataSource =
_objdt;
GridView1.DataBind();
}
}
/// <summary>
/// Function for binding retrieving the data from database
/// </summary>
/// <returns></returns>
public
DataTable GetDataFromDataBase()
{
DataTable
_objdt = new DataTable();
string
querystring = "select * from Books;";
OleDbConnection
_objcon = new OleDbConnection(connectionstring);
OleDbDataAdapter
_objda = new OleDbDataAdapter(querystring,
_objcon);
_objcon.Open();
_objda.Fill(_objdt);
return
_objdt;
}
/// <summary>
/// For hilighted and normal row
/// </summary>
/// <param
name="sender"></param>
/// <param
name="e"></param>
protected
void GridView1_RowCreated(object sender, GridViewRowEventArgs
e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
}
}
}
}
|
Now we will run the page to see the output.
About the Author
Nice article .thanks.
ReplyDelete