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

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="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">...</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="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">...</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:

• BackColor
• ForeColor
• Font

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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";
    }
}

Method 2

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:

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0