Data GridView custom CSS style With example in Asp.net



          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();

    }

}


Previous
Next Post »
Thanks for your comment