Microsoft Dot Net Master: Grid View

Saturday, October 1, 2011

Hover Effects for GridView Rows Using CSS

1: ASPX Page Code (Default.aspx)

<%@ 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>Mouse Hover Effects Using CSS</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvHover" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False"
            GridLines="Vertical" CssClass="grid-view" OnRowCreated="gvHover_RowCreated">
            <Columns>
                <asp:BoundField HeaderText="n" DataField="n">
                    <HeaderStyle Width="25px" />
                    <ItemStyle Width="25px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
                    <HeaderStyle Width="150px" />
                    <ItemStyle Width="150px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
                    <HeaderStyle Width="150px" />
                    <ItemStyle Width="150px" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

2: Default.aspx.cs Page Code

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvHover.DataSource = GetDataTable();
            gvHover.DataBind();
        }
    }

    protected DataTable GetDataTable()
    {
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        Random rnd = new Random();
        dTable.Columns.Add("n");
        dTable.Columns.Add("qbrtn");
        dTable.Columns.Add("sqrtn");

        for (int n = 1; n <= 10; ++n)
        {
            dRow = dTable.NewRow();

            dRow["n"] = n + ".";
            dRow["qbrtn"] = Math.Pow(n, 1D / 3D) + "";
            dRow["sqrtn"] = Math.Sqrt(n) + "";

            dTable.Rows.Add(dRow);
            dTable.AcceptChanges();
        }

        return dTable;
    }

    protected void gvHover_RowCreated(object sender, GridViewRowEventArgs e)
    {
        //Add CSS class on header row.
        if (e.Row.RowType == DataControlRowType.Header)
            e.Row.CssClass = "header";

        //Add CSS class on normal row.
        if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Normal)
            e.Row.CssClass = "normal";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Alternate)
            e.Row.CssClass = "alternate";
    }
}

3: StyleSheet.css Code

.grid-view

{
    padding: 0;
    margin: 0;
    border: 1px solid #333;
    font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
    font-size: 0.9em;
}

.grid-view tr.header

{
    color: white;
    background-color: #FF5600;
    height: 25px;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

.grid-view tr.normal

{
    color: black;
    background-color: #FDC64E;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.alternate

{
    color: black;
    background-color: #D59200;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.normal:hover, .grid-view tr.alternate:hover

{
    background-color: white;
    color: black;
    font-weight: bold;
}

4: Demo

Microsoft Dot Net Master

Saturday, October 1, 2011

Hover Effects for GridView Rows Using CSS

Some Importent Link

Categories