ASP.NET GRIDVIEW CSS

ASH

10 years ago

ASP.NET C# GRIDVIEW DESIGNING with CSS

Today I will be showing you how you can make the gridview in asp.net website look better using css.
There are several ways in asp.net to design gridview.

First of all, define your connectionstring in web.config file
In Web.config file define your connectionstring :

<connectionStrings>
<add name="myconnectionString" connectionString="Data Source=HITESH\SQLEXPRESS;Initial Catalog=MyDatabase;User ID=hitesh;Password=789"/>
</connectionStrings>

Now define a gridview in .aspx page :

<asp:GridView runat="server" ID="datagridview">
</asp:GridView>

Fill it from your desired table using .cs page
To do this you will have to declare namespaces :

using System.Data.SqlClient;
using System.Data.Sql;

Now declare following :

public partial class _Default : System.Web.UI.Page
{
String myconnectionString = ConfigurationManager.ConnectionStrings["myconnectionstring"].ConnectionString;
SqlConnection con;
SqlDataAdapter adapter;
DataSet ds;
SqlCommand cmd;

The myconnectionString string is our connectionString.

Now to fill the gridview at runtime you will have to use following code in page load method:

protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection(myconnectionString);
cmd = new SqlCommand("select * from mytable", con);
con.Open();
adapter = new SqlDataAdapter(cmd);
ds = new DataSet();
adapter.Fill(ds, "mytable");
datagridview.DataSource = ds.Tables[0];
datagridview.DataBind();
con.Close();
}

If you run this page, you will a basic gridview with the data from your table with no design.
Now finally the design part 🙂 🙂

There are basically two ways to design our gridview :

WAY 1 : USING THE .ASPX PAGE
Edit your girdview in design page (.aspx) as following :

<asp:GridView runat="server" ID="datagridview">
<RowStyle BackColor="#ffffff" ForeColor="#000000" Font-Size="16px" />
<HeaderStyle BackColor="#4a70d0" ForeColor="#ffffff" Font-Size="20px" />
<AlternatingRowStyle BackColor="#c0c0c0" ForeColor="#000000" Font-Size="16px" />
</asp:GridView>

Here I am using RowStyle, HeaderStyle and AlternatingRowStyle attributes to design the gridview.
Now run the code you will see the gridview something like this :

WAY 2 : USING THE STYLE SHEET (.css file)
Make a new folder with name css in your project.
Make a new CSS file in your project and name it StyleSheet.css inside the folder css.
Edit it as following :

body
{

}

.mydatagrid /** main grid */
{
width: 80%;
border: solid 2px #000000;
}
.mydatagrid td /** text element **/
{
padding: 2px;
border: solid 1px #000000;
color: #000000;
text-align: left;
font-size: 18px;
}
.mydatagrid th /**header details */
{
padding: 4px 2px;
color: #FFFFFF;
background: #509683;
border: solid 1px #000000;
font-size: 20px;
}
.mydatagrid .alt
{
background: #fcfcfc url(grd_alt.png) repeat-x top;
}

.mydatagrid tr:nth-child(even)
{
background-color: #ffffff;
}
.mydatagrid tr:nth-child(odd)
{
background-color: #cccccc;
}

In .aspx design page declare a link to this file as

<head runat="server">
<title>ASP.NET GirdView Basics </title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

The tag link is used to create the link.
Note : This should be always inside the head tag.
Edit your girdview as

<asp:GridView runat="server" ID="datagridview" CssClass="mydatagrid">

In StyleSheet.css file we declared the class .mydatagrid and styled it.
So in design page, our gridview is referenced to this class using CssClass="mydatagrid"

Your gridview should look like this :

Share this: