In this article I’m going to explain how to create ASP.NET Gridview Custom Css style.
Gridview control displays the values of a data source in a table where each column represents a field and each row represents a record. GridView control has default style properties for header row, data row and pager. But for better UI we have to create custom CSS. Here I have used png images for header,data row and pager. You can download images by clicking the link given below.
Download PNG Imges
CSS style:
.Grid {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1; }
.Grid th {
padding : 4px 2px;
color: #fff;
background: #363670 url(Images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em; }
.Grid .alt {
background: #fcfcfc url(Images/grid-alt.png) repeat-x top; }
.Grid .pgr {background: #363670 url(Images/grid-pgr.png) repeat-x top; }
.Grid .pgr table { margin: 3px 0; }
.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.Grid .pgr a { color: Gray; text-decoration: none; }
.Grid .pgr a:hover { color: #000; text-decoration: none; }
Designer source 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">
<link href="Gridstyle.css" rel="stylesheet" type="text/css" />
<title>GridView Style<title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"
AllowPaging="true" PageSize="8" OnPageIndexChanging="gvEmployee_PageIndexChanging"
CssClass="Grid"
AlternatingRowStyle-CssClass="alt"
PagerStyle-CssClass="pgr" >
<Columns>
<asp:BoundField DataField="empid" HeaderText="Employee ID" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="designation" HeaderText="Designation" />
<asp:BoundField DataField="city" HeaderText="City" />
<asp:BoundField DataField="country" HeaderText="Country" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# 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;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected void BindData()
{
DataSet ds = new DataSet();
try
{
ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
if (ds != null && ds.HasChanges())
{
gvEmployee.DataSource = ds;
gvEmployee.DataBind();
}
}
catch (Exception ex)
{
}
}
protected void gvEmployee_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvEmployee.PageIndex = e.NewPageIndex;
BindData();
}
}
Download Source Code Now
