Latest

random

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 controlThe below asp.net example demonstrates formatting GridView control using Cascading Style Sheets. 

User Interface - 1
asp.net gridview css themes,asp.net gridview css examples,asp.net gridview css class,asp.net gridview css styles,asp.net gridview css templates,asp.net gridview css styles samples,gridview css styles example

Style.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" %>

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


User Interface -2
gridview, jquery gridview, gridview example, datagrid,ajax gridview, gridview xml, aspx gridview, web grid, .net control, gridview css examples, asp grid view, grid css style,web   controls, user interface, graphical user interface,web ui, css programming, css basics, html table css, css style sheets examples, css examples

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.

3 comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.