Customizing an ASP.NET GridView control with CSS styles - Stojance's Blog - MK Web UG

Sometimes we want to customize the view of the GridView control with our custom made design. In order to do so, we need to set the property CssClass of the GridView control to the class we have defined to give our custom look.

Let’s have a CSS class named CustomView and we have defined it as follows in the style.css file:

TABLE.CustomView {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
TABLE.CustomView {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
TABLE.CustomView TR:hover TD {
    background: #d0dafd url('images/gradhover.png') repeat-x;
    color: #fff;
}
TABLE.CustomView TH {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #fff;
}
TABLE.CustomView TD {
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: #fff;
    border-top: 1px solid #fff;
    background: #e8edff url('images/gradback.png') repeat-x;
}

Next thing to do is reference this CSS file in our asp.net page in the <head> tag:

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

Let’s insert a GridView control in our page and define it’s properties as follows:

<asp:GridView ID="GridView1" runat="server"
                      CSSClass="CustomView" CellSpacing="1" 
                      GridLines="None">
</asp:GridView>

And in the code behind, we fill it with data:

            DataTable dataTable = new DataTable();

            dataTable.Columns.Add("Book");

            dataTable.Columns.Add("Price");

            dataTable.LoadDataRow(new object[] {

                "Ultra-fast ASP.NET","$49.99"

            }, true);

            dataTable.LoadDataRow(new object[] {

                "Real World ASP.NET Best Practices","$39.99"

            }, true);

            dataTable.LoadDataRow(new object[] {

                "Pro C# 2010 and the .NET 4 Platform","$59.99"

            }, true);

            dataTable.LoadDataRow(new object[] {

                "Pro ASP.NET Web Forms Techniques","$59.99"

            }, true);

            GridView1.DataSource = dataTable;

            GridView1.DataBind();

When we run our project, this is what we will get:

Thus, by modifying the CSS class you can experiment and define your own styles.

The full source code can be found here.

Regards,

Stojanche