Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Data GridView custom CSS style With example in


          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" "">
<html xmlns="">

<head runat="server">

    <link href="Gridstyle.css" rel="stylesheet" type="text/css" />

    <title>GridView Style


    <form id="form1" runat="server">


        <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"

                      AllowPaging="true" PageSize="8" OnPageIndexChanging="gvEmployee_PageIndexChanging"



                      PagerStyle-CssClass="pgr" >       

         <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" />       






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)





    protected void BindData()


        DataSet ds = new DataSet();




            if (ds != null && ds.HasChanges())


                gvEmployee.DataSource = ds;




        catch (Exception ex)




  protected void gvEmployee_PageIndexChanging(object sender, GridViewPageEventArgs e)


        gvEmployee.PageIndex = e.NewPageIndex;




Download Source Code Now

This post first appeared on 1000 Programmer, please read the originial post: here

Share the post

Data GridView custom CSS style With example in


Subscribe to 1000 Programmer

Get updates delivered right to your inbox!

Thank you for your subscription