|
How to display mouseover effect on GridView rows using CSS?
by: Itfunda
Product Type: Tips and Tricks (Books)
Technologies: ASP.NET GridView
To display mouseover effect on the GridView rows we can follow this approach.
ASPX Page
<style type="text/css">
#GridView1 tr.rowHover:hover
{
background-color: Yellow;
font-family: Arial;
}
</style>
<asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" />
Code Behind
string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
}
private void GetData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
// specify the data source for the GridView
GridView1.DataSource = table;
// bind the data now
GridView1.DataBind();
}
In the above code snippet, the code behind code is just to populate records from the database to the GridView. On the .aspx page in the GridView RowStyle-CssClass , we have specified ”rowHover ” css class. In this CSS class we have changed the background color to “Yellow” and font family to “Arial”.
The “rowHover” CSS class style will only gets applied when we hover the rows of the GridView (notice the CSS rowHover class declaration in the .aspx page and you should understand how this filteration is working).
OUTPUT
|