GridView Web Control HTML Table CSS Style - UI
ASP .Net GridView web control is basically used to display the values of a data source in a table where each column represents a field and each row represents a record. The GridView control enables you to select, sort, and edit these items. Gridview inherit from the System.Web.UI.WebControls namespace in asp.net web application.
Formatting GridView Custom CSS Style - C#
In the example I am going to show how to apply custom css style on asp.net gridview web control. If you want to formatting GridView instead of itemstyle, header style which is available in gridview. We can use Cascading Style Sheets to format the GridView control. The below asp.net example demonstrates formatting GridView control using Cascading Style Sheets.
User Interface - 1
Style.css
/*----------------data Table GridView Css----------------------*/
/*----------------data Table GridView Css----------------------*/
.EU_TableScroll
{
max-height: 275px;
overflow: auto;
border:1px solid #ccc;
}
.EU_DataTable
{
border-collapse: collapse;
width:100%;
}
.EU_DataTable tr
th
{
background-color: #3c454f;
color: #ffffff;
padding: 10px 5px 10px 5px;
border: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform:capitalize;
}
.EU_DataTable tr:nth-child(2n+2)
{
background-color: #f3f4f5;
}
.EU_DataTable tr:nth-child(2n+1)
td
{
background-color: #d6dadf;
color: #454545;
}
.EU_DataTable tr
td
{
padding: 5px 10px 5px 10px;
color: #454545;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #cccccc;
vertical-align: middle;
}
.EU_DataTable tr
td:first-child
{
text-align: center;
}
/*-----------------------------------------------------------------*/
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample1.aspx.cs" Inherits="_Default" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample1.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>asp gridview css style sample 1</title>
<link href="css/style1.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="EU_TableScroll"
id="showData"
style="display: block">
<asp:GridView ID="GridView1"
runat="server"
CssClass="EU_DataTable"
AllowPaging="true"
PageSize="7"
OnPageIndexChanging="GridView1_PageIndexChanging">
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindData();
}
}
private void BindData()
{
DataTable
dt = new DataTable();
dt.Columns.Add("EmpId",
typeof(int));
dt.Columns.Add("Name",
typeof(string));
dt.Columns.Add("Address",
typeof(string));
dt.Columns.Add("Date",
typeof(DateTime));
//
// Here we
add five DataRows.
//
dt.Rows.Add(25, "Rk", "Gurgaon",
DateTime.Now);
dt.Rows.Add(50, "Sachin", "Noida",
DateTime.Now);
dt.Rows.Add(10, "Nitin", "Noida",
DateTime.Now);
dt.Rows.Add(21, "Aditya", "Meerut",
DateTime.Now);
dt.Rows.Add(100, "Mohan", "Banglore",
DateTime.Now);
dt.Rows.Add(101, "ABC", "Delhi",
DateTime.Now);
dt.Rows.Add(102, "XYZ", "Noida",
DateTime.Now);
dt.Rows.Add(103, "BBC", "Delhi",
DateTime.Now);
dt.Rows.Add(104, "CIA", "Banglore",
DateTime.Now);
dt.Rows.Add(105, "KBC", "Delhi",
DateTime.Now);
dt.Rows.Add(106, "Jack", "Noida",
DateTime.Now);
dt.Rows.Add(107, "Jhon", "Gurgaon",
DateTime.Now);
dt.Rows.Add(108, "Mali", "Gurgaon",
DateTime.Now);
dt.Rows.Add(109, "Sara", "Noida",
DateTime.Now);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
GridView1.PageIndex = e.NewPageIndex;
BindData();
}
User Interface -2
Style.css
/*----------------data Table GridView
Css----------------------*/
* {
padding: 0;
margin: 0;
}
body {
font: 11px Tahoma;
}
h1 {
font: bold 32px Times;
color: #666;
text-align: center;
padding: 20px 0;
}
#container {
width: 700px;
margin: 10px auto;
}
.mGrid { width: 100%; background-color:
#fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;
}
.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #717171; }
.mGrid th { padding: 4px 2px; color: #fff; background: #424242 url(grd_head.png)
repeat-x top; border-left: solid 1px #525252; font-size: 0.9em; }
.mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x
top; }
.mGrid .pgr {background: #424242 url(grd_pgr.png) repeat-x
top; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px;
}
.mGrid .pgr a { color: #666; text-decoration:
none; }
.mGrid .pgr a:hover { color: #000; text-decoration:
none; }
/*-----------------------------------------------------------------*/
Default.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Sample2.aspx.cs"
Inherits="Sample2"
%>
<!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>asp
gridview css style sample 2</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None"
AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
PageSize="7" OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField DataField="EmpId" HeaderText="EmpId" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="Date" HeaderText="Date" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Default.aspx.cs
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindData();
}
}
private void BindData()
{
DataTable
dt = new DataTable();
dt.Columns.Add("EmpId",
typeof(int));
dt.Columns.Add("Name",
typeof(string));
dt.Columns.Add("Address",
typeof(string));
dt.Columns.Add("Date",
typeof(DateTime));
//
// Here we
add five DataRows.
//
dt.Rows.Add(25, "Rk", "Gurgaon",
DateTime.Now);
dt.Rows.Add(50, "Sachin", "Noida",
DateTime.Now);
dt.Rows.Add(10, "Nitin", "Noida",
DateTime.Now);
dt.Rows.Add(21, "Aditya", "Meerut",
DateTime.Now);
dt.Rows.Add(100, "Mohan", "Banglore",
DateTime.Now);
dt.Rows.Add(101, "ABC", "Delhi",
DateTime.Now);
dt.Rows.Add(102, "XYZ", "Noida",
DateTime.Now);
dt.Rows.Add(103, "BBC", "Delhi",
DateTime.Now);
dt.Rows.Add(104, "CIA", "Banglore",
DateTime.Now);
dt.Rows.Add(105, "KBC", "Delhi",
DateTime.Now);
dt.Rows.Add(106, "Jack", "Noida",
DateTime.Now);
dt.Rows.Add(107, "Jhon", "Gurgaon",
DateTime.Now);
dt.Rows.Add(108, "Mali", "Gurgaon",
DateTime.Now);
dt.Rows.Add(109, "Sara", "Noida",
DateTime.Now);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
GridView1.PageIndex = e.NewPageIndex;
BindData();
}
I hope you have enjoyed this article based on GridView CSS Style in ASP.net web apps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
GridView Web Control HTML Table CSS Style - UI
Reviewed by Ravi Kumar
on
12:39 PM
Rating:
Reviewed by Ravi Kumar
on
12:39 PM
Rating:
Helpfull...Thanks..
ReplyDeleteu're welcome.. :) and keep visiting.
Deletethanks ravi
ReplyDelete