Adding Styles to the DataGrid

The DataGrid control supports a sophisticated set of styles just as the other Web controls do. Font, color, and border styles can be set directly on a control. In addition, the DataGrid provides support for a set of template styles. These template styles are applied to pieces of the output, not to the whole control.

In Code Listing 3-9, we add styles to the short list of states in the DataGrid. We also set the ShowFooter property to true to render both header and footer rows for the data. We can modify the appearance of the DataGrid’s table layout by specifying ItemStyle and AlternatingItemStyle.

Code Listing 3-9: DataGridStyles.aspx

 <%@Import namespace="System.Data" %>
<script language="C#" runat="server">
protected void Page_Load(object o, EventArgs e) {
    datagrid.Columns[0].ItemStyle.ForeColor
        = System.Drawing.Color.Red;
    datagrid.DataSource = GetData();
    DataBind();
}
 
DataTable GetData() {
    DataTable data = new DataTable();
    data.Columns.Add(new DataColumn("TheID", typeof(Int32)));
    data.Columns.Add(new DataColumn("Name", typeof(string)));
    data.Columns.Add(new DataColumn("TimeZone", typeof(string)));
 
    DataRow dr;
    dr = data.NewRow();
    dr[0] = 1; dr[1] = "Washington"; dr[2] = "Pacific";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 2; dr[1] = "Utah"; dr[2] = "Mountain";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 3; dr[1] = "Wisconsin"; dr[2] = "Central";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 4; dr[1] = "New York"; dr[2] = "Eastern";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 5; dr[1] = "Florida"; dr[2] = "Eastern";
    data.Rows.Add(dr);
 
    return data;
}
</script>
<form runat="server">
    <asp:DataGrid runat="server"  
        AutoGenerateColumns="false" 
        font-name="tahoma" font-size="12 pt" font-bold="true" 
        ShowFooter="true" BackColor="#667788" ForeColor="#FFFFFF" >
        <HeaderStyle BackColor="tan" BorderColor="#000000" 
            ForeColor="#334455" HorizontalAlign="center" 
            font-size="14 pt" />
        <FooterStyle BackColor="tan" BorderColor="#000000" 
            ForeColor="#334455" HorizontalAlign="center" 
            font-size="14 pt" />
        <ItemStyle BackColor="#667788" ForeColor="#ffffff" />
        <AlternatingItemStyle BackColor="#ffffff"
            ForeColor="#334455" />
        <Columns>
            <asp:BoundColumn HeaderText="ID" FooterText="ID" 
                DataField="TheID" />
            <asp:BoundColumn HeaderText="Name" FooterText="Name" 
                DataField="Name" />
            <asp:BoundColumn HeaderText="Time Zone" 
                FooterText="Time Zone" DataField="TimeZone" />
        </Columns>
    </asp:DataGrid>
</form>