How to set the style of a cell in asp:DataGrid?

Question

How can i set the (css) style of a cell in an asp:DataGrid?

What am i really trying to achieve? An html table, where i control the per-cell html content, and the per-row and per-cell css style:

<TABLE>
   <TR class="odd available">
      <TD class="holiday available hassub firstColumn">
          <P ...>...
      <TD class="blackout">
          <A href="...">...</A>
      <TD style="available">
          <SPAN ...>...</SPAN>
      <TD class="booked">
          <DIV ...>...</DIV>
      <TD class="orphan available">
          <DIV ...>...</DIV>
      <TD style="orphan booked checked">
          <SPAN ...>...</SPAN>
          <A href="...">...</A>
          <DIV ...>...</DIV>
   </TR>
   <TR class="blackout">
      <TD>34 points
      <TD><%# GetHtmlForCell() %>
   </TR>
</TABLE>

And it is accepted that an asp:Repeater cannot work in this case.

i have HTML that i need to generate; and i just have to see if ASP.net can generate required html. i'm guessing not, since "WebForms" means you don't generate HTML.

Bonus Chatter

An asp:DataGrid control in ASP.net renders multiple cells. The formatting of each style can be adjusted by setting various formatting properties, for example:

But there is no way to adjust the Style of a cell, e.g.

style="holiday blackout hassub"

Bonus Reading

Some unrelated bonus reading:

Change the style of cell within datagrid
MSDN: DataGridViewCellStyle Class
How to set the style of a cell in an asp:ListView?
Create a HTML table with an ASP repeater
How to create a three column table in ASP.Net Repeater
custom html code in a repeater
MSDN: Cell Styles in the Windows Forms DataGridView Control

Are you actually refering to the old `DataGrid` control instead of the `GridView`? — Tim Schmelter, May 14 '12 at 15:59
I don't understand what you're trying to do :( you're setting css classes using style attribute. Is it a typo? — Claudio Redi, May 14 '12 at 16:05
@ClaudioRedi Yes, my mistake. It's 78° in here; my brain is fried. — Ian Boyd, May 14 '12 at 16:49

score 2 · Accepted Answer · answered May 14 '12 at 16:09

Assuming that you actually mean a GridView instead of the old DataGrid, you can use the CssClass property for the GridViewRow and TableCells.

For example in RowDataBound:

protected void Grid_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        if(e.Row.RowIndex == 0)
        {
            e.Row.CssClass = "odd available";
            e.Row.Cells[0].CssClass = "holiday available hassub firstColumn";
            // ....
            e.Row.Cells[4].CssClass = "orphan booked checked";
        }
        else if(e.Row.RowIndex == 1)
            e.Row.CssClass = "blackout";
    }
}

score 1 · Answer 2 · answered May 14 '12 at 16:11

This is easily done if you handle the OnRowDataBound. Example:

<style>
.class25
{
    background-color:Red;  
}
.class25a
{
    font-weight:bolder;
}
.class23
{
    background-color:Yellow;  
}
.class23a
{
    font-size:20px;
}
.class33
{
    background-color:Fuchsia;  
}
.class33a
{
    font-style:italic;
}
</style>
<asp:GridView ID="customGrid" runat="server" OnRowDataBound="customGrid_RowDataBound">

Now on Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindData();
    }
}

private void BindData()
{
    List<Employee> emp = new List<Employee>(){
        new Employee{Age=25,ID=1,First="John",Last="Smith"},
        new Employee{Age=23,ID=2,First="Juan",Last="Cabrera"},
        new Employee{Age=33,ID=3,First="Richard",Last="Mar"}
    };

    customGrid.DataSource = emp;
    customGrid.DataBind();

}

protected void customGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if ((e.Row.DataItem as Employee).Age == 25)
            e.Row.Cells[0].Attributes.Add("class", "class25 class25a");
        else if((e.Row.DataItem as Employee).Age == 23)
            e.Row.Cells[0].Attributes.Add("class", "class23 class23a");
        else
            e.Row.Cells[0].Attributes.Add("class", "class33 class33a");
    }
}

public class Employee
{
    public int ID { get; set; }
    public int Age { get; set; }
    public string First { get; set; }
    public string Last { get; set; }
}

Renders:

enter image description here

How to set the style of a cell in asp:DataGrid?

Bonus Chatter

Bonus Reading

2 Answers2

Linked