Mouseover-Effect (Hover) for ASP.NET GridView with CSS
Mouseover-Effect (Hover) for ASP.NET GridView with CSS
Introduction
| In this short article I will show how to add a nice mouseover-effect for a GridView with a simple CSS-class - no javascript is needed for this. |
(1) Add the GridView
Drop a GridView from VS toolbox onto your form. Don't assign any auto-format, leave the Grid as is. Then add a header-style - for the example we have chosen a green background and a white font. The GridView's border-width we set to 0px.
(2) Add the CSS
We add a CSS-file to our project with a single CSS-class called MyGridView which only contains the font-settings:
.MyGridView { font-family: Arial; font-size: 12px; }
The next thng we have to define is a CSS-class for a GridView-row.
.MyGridView tr.row { color: #000000; background-color: #FFFFFF; } .MyGridView tr.row:hover { background-image: url('../img/GridViewBG.jpg'); background-repeat: repeat-x; color: #333333; }
For the hovering-effect we created a small image named GridViewBG.jpg which has a size of 2px x 30px. It is the green gradient you can see when the mousepoiner is over a row.
After that, we a add the CSS-file to the ASP.NET-form. Here is the form's full markup-code:
After that, we a add the CSS-file to the ASP.NET-form. Here is the form's full markup-code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>Untitled Page</title> <link href="css/GridViewStyles.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="0px" CellPadding="8" CssClass="MyGridView" Width="400px" OnRowCreated="GridView1_RowCreated"> <Columns> <asp:BoundField DataField="Name" HeaderText="Name"> <HeaderStyle HorizontalAlign="Left" /> </asp:BoundField> <asp:BoundField DataField="Firstname" HeaderText="Firstname"> <HeaderStyle HorizontalAlign="Left" /> </asp:BoundField> </Columns> <HeaderStyle BackColor="Green" Font-Bold="True" ForeColor="White" /> </asp:GridView> </div> </form> </body> </html>
As you can see, we defined two columns to display data for persons. The CSS-class for the GridView is assigned by the property CssClass="MyGridView". But assigning this is not enough because the class for a GridView's row has also to be assigned. We use the GridView's event RowCreated for this task:
protected void GridView1_RowCreated (object sender, GridViewRowEventArgs e) { // Set the CSS-class "row" for normal grid-rows if (e.Row.RowType == DataControlRowType.DataRow) e.Row.CssClass = "row"; }
(3) Display data
Now the only thing left to do is to fill the GridView with some sample data so that we can see the mouseover-effect in action. Here is our DataSourceProvider-class that generates some data for us:
public class DataSourceProvider { public static DataTable GetPersons() { DataTable result = new DataTable(); result.Columns.Add("Name"); result.Columns.Add("Firstname"); AddPerson(result, "Matthias", "Pieroth"); AddPerson(result, "Mark", "Twain"); AddPerson(result, "Charles", "Bukowski"); AddPerson(result, "Francois", "Villon"); return result; } private static void AddPerson (DataTable table, string firstName, string name) { DataRow row = table.NewRow(); row["Name"] = name; row["Firstname"] = firstName; table.Rows.Add(row); } }
The binding of these data is done in the form's Page_Load-event
protected void Page_Load(object sender, EventArgs e) { GridView1.DataSource = DataSourceProvider.GetPersons(); GridView1.DataBind(); }
No comments:
Post a Comment