Changing Table Cell Color

This example shows how to change a table cell color. In this case, we have a Grid called Tasks in which every second row should have a background color different from the preceding row.

For ASP, PHP, Perl, ColdFusion, Java

ASP

'Global variable
 Dim Counter

Function Tasks_BeforeShowRow()

  If Counter = 0 Then
    Tasks.RowStyle.Value = "ClearDataTD"
    Tasks.RowStyle1.Value = "ClearDataTD"
    Counter = 1
  Else
    Tasks.RowStyle.Value = "ClearAltDataTD"
    Tasks.RowStyle1.Value = "ClearAltDataTD"
    Counter = 0
  End if

End Function

PHP

function Tasks_BeforeShowRow() {
global $Counter;
global $Tasks;

  if ($Counter == 0) { 
    $Tasks->RowStyle->SetValue("ClearDataTD");
    $Tasks->RowStyle1->SetValue("ClearDataTD");
    $Counter = 1;
  } else {
    $Tasks->RowStyle->SetValue("ClearAltDataTD");
    $Tasks->RowStyle1->SetValue("ClearAltDataTD");
    $Counter = 0;
  }

}

Perl

sub Tasks_BeforeShowRow() {

  if ($Counter == 0) { 
    $Tasks->{RowStyle}->SetValue("ClearDataTD");
    $Tasks->{RowStyle1}->SetValue("ClearDataTD");
    $Counter = 1;
  } else {
    $Tasks->{RowStyle}->SetValue("ClearAltDataTD");
    $Tasks->{RowStyle1}->SetValue("ClearAltDataTD");
    $Counter = 0;
  }

}

ColdFusion

<!---Tasks_BeforeShowRow --->

  <CFPARAM Name="Counter" Default="0"> 
  <CFIF Counter EQ 0> 
    <CFSET fldRowStyle="ClearDataTD">
    <CFSET fldRowStyle1="ClearDataTD">
    <CFSET Counter = 1>
  <CFELSE>
    <CFSET fldRowStyle="ClearAltDataTD">
    <CFSET fldRowStyle1="ClearfldDataTD">
    <CFSET Counter = 0>
  </CFIF>

Java

//Tasks_BeforeShowRow

  if ((e.getGrid().getCurrentRowNumber()%2) == 0) { 
    e.getGrid().getControl("RowStyle").setValue("ClearDataTD");
    e.getGrid().getControl("RowStyle1").setValue("ClearDataTD");
  } else {
    e.getGrid().getControl("RowStyle").setValue("ClearAltDataTD");
    e.getGrid().getControl("RowStyle1").setValue("ClearAltDataTD");
  }

For .NET

Switch to HTML mode
Modify the td tag as follows

<!-- BEGIN Row -->
 <tr>
   <td id="task_name_td" runat="server">{TaskName}</td>
   <td id="project_name_td" runat="server">{Status}</td>
 </tr>
<!--  END Row -->

Add the Before Show Row event to the Tasks grid.
Add a variable called Counter below the 'End Forms Definition section
Add the code below:

VB.Net

Dim Counter As Integer

'Tasks_BeforeShowRow 
  If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    Dim task_name_td As System.Web.UI.HtmlControls.HtmlTableCell = DirectCast(e.Item.FindControl("task_name_td"),System.Web.UI.HtmlControls.HtmlTableCell)
    Dim project_name_td As System.Web.UI.HtmlControls.HtmlTableCell = DirectCast(e.Item.FindControl("project_name_td"),System.Web.UI.HtmlControls.HtmlTableCell)
    If Counter = 0 Then 
      task_name_td.Attributes("Class") = "ClearDataTD"
      project_name_td.Attributes("Class") = "ClearDataTD"
      Counter = 1 
    Else 
      task_name_td.Attributes("Class") = "ClearAltDataTD"
      project_name_td.Attributes("Class") = "ClearAltDataTD"
      Counter = 0
	End IF 
  End If

C#

 protected int Counter;

//Tasks_BeforeShowRow 
  if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
    System.Web.UI.HtmlControls.HtmlTableCell task_name_td = (System.Web.UI.HtmlControls.HtmlTableCell)e.Item.FindControl("task_name_td");
    System.Web.UI.HtmlControls.HtmlTableCell project_name_td = (System.Web.UI.HtmlControls.HtmlTableCell)e.Item.FindControl("project_name_td");
    if (Counter == 0) { 
      task_name_td.Attributes["Class"] = "ClearDataTD";
      project_name_td.Attributes["Class"] = "ClearDataTD";
      Counter = 1;
    } else {
      task_name_td.Attributes["Class"] = "ClearAltDataTD";
      project_name_td.Attributes["Class"] = "ClearAltDataTD";
      Counter = 0;
    } 
  }