Tuesday, April 16, 2013

ASP.Net GridView style with CSS with Rounded Corners

In this post i will show how to style Your GridView With CSS.....

Out Put :





















ASPX Page :



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridView_Designing.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>GridView Styling</title>
    <link href="Styles/TableStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <asp:GridView ID="GridView1" runat="server" 
                OnRowDataBound="GridView1_RowDataBound" Width="50%"
                RowStyle-CssClass="rounded-corner" 
                EmptyDataRowStyle-CssClass="rounded-corner" GridLines="None"
                CssClass="rounded-corner" HeaderStyle-CssClass="rounded-corner" AlternatingRowStyle-CssClass="rounded-corner"
                BorderWidth="0px" ShowFooter="true" onprerender="GridView1_PreRender">
            </asp:GridView>
        </center>
    </div>
    </form>
</body>
</html> 
 
Code Behind : 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
 
namespace GridView_Designing
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = GridViewBinding();
                GridView1.DataBind();
            }
        }
 
        private DataTable GridViewBinding()
        {
            DataTable dt = new DataTable();
            try
            {
                dt.Columns.Add("SNO"typeof(int));
                dt.Columns.Add("Column1"typeof(string));
                dt.Columns.Add("Column2"typeof(string));
                dt.Columns.Add("Column3"typeof(string));
                dt.Columns.Add("Column4"typeof(string));
                DataRow dr = null;
                for (int i = 0; i < 10; i++)
                {
                    dr = dt.NewRow();
                    int sno = (i + 1);
                    dr["SNO"] = sno;
                    dr["Column1"] = "Column1, Row " + sno;
                    dr["Column2"] = "Column2, Row " + sno;
                    dr["Column3"] = "Column3, Row " + sno;
                    dr["Column4"] = "Column4, Row " + sno;
                    dt.Rows.Add(dr);
                }
            }
            catch (Exception ex)
            {
                string ErrMsg = ex.Message;
            }
            return dt;
        }
 
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try
            {
                if (e.Row.RowType == DataControlRowType.Header)
                {
                    e.Row.Cells[0].CssClass = "rounded-First";
                    e.Row.Cells[e.Row.Cells.Count - 1].CssClass = "rounded-Last";
                }
                
                if (e.Row.RowType == DataControlRowType.Footer)
                {
                    int colCount = e.Row.Cells.Count - 1;
                    e.Row.Cells[0].CssClass = "rounded-foot-left";
 
                    e.Row.Cells[1].ColumnSpan = colCount - 1;
                    e.Row.Cells[1].Text = "Your Footer Text Goes Here...!";
                    e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
                    //e.Row.Cells[1].Visible = false;
                    e.Row.Cells[2].Visible = false;
                    e.Row.Cells[3].Visible = false;
 
                    e.Row.Cells[colCount].CssClass = "rounded-foot-right"; 
                }
            }
            catch (Exception ex)
            {
                string ErrMsg = ex.Message;                
            }
        }
 
        protected void GridView1_PreRender(object sender, EventArgs e)
        {
            try
            {
                GridView1.UseAccessibleHeader = false;
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            }
            catch (Exception ex)
            {
                string ErrMsg = ex.Message;
            }
        }
    }
}
 
----------------------------------------------- 
DownLoad the Code from HERE 

No comments:

Post a Comment