CodeCharge Studio All ASP PHP Perl ColdFusion Java C#.NET VB.NET

Changing Table Cell Color

This example demonstrates how to change cell color in a table. 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

  1. Switch to HTML mode
  2. Select Forms Tab in the Toolbox
  3. Add a Label called RowStyle:
    <!-- BEGIN Row -->
     <tr class="{RowStyle}">
       <td>{TaskName}</td>
       <td>{Status}</td>
     </tr>
    <!--  END Row -->
    
  4. Add the Before Show Row event to the Tasks grid.
  5. Within the event, add the code below:

ASP

'Global variable
 Dim Counter

Function Tasks_BeforeShowRow(Sender)

  If Counter = 0 Then
    Tasks.RowStyle.Value = "Row"
    Counter = 1
  Else
    Tasks.RowStyle.Value = "AltRow"
    Counter = 0
  End if

End Function

PHP

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

  if ($Counter == 0) { 
    $Tasks->RowStyle->SetValue("Row");
    $Counter = 1;
  } else {
    $Tasks->RowStyle->SetValue("AltRow");
    $Counter = 0;
  }

}

Perl

sub Tasks_BeforeShowRow() {

  if ($Counter == 0) { 
    $Tasks->{RowStyle}->SetValue("Row");
    $Counter = 1;
  } else {
    $Tasks->{RowStyle}->SetValue("AltRow");
    $Counter = 0;
  }

}

ColdFusion

<!---Tasks_BeforeShowRow --->

  <CFPARAM Name="Counter" Default="0"> 
  <CFIF Counter EQ 0> 
    <CFSET fldRowStyle="Row">
    <CFSET Counter = 1>
  <CFELSE>
    <CFSET fldRowStyle="AltRow">
    <CFSET Counter = 0>
  </CFIF>

Java

//Tasks_BeforeShowRow

  if ((e.getGrid().getCurrentRowNumber()%2) == 0) { 
    e.getGrid().getControl("RowStyle").setValue("Row");
  } else {
    e.getGrid().getControl("RowStyle").setValue("AltRow");
  }


For .NET

  1. Switch to HTML mode
  2. Modify the TR tag as follows


  3. <!-- BEGIN Row -->
     <tr id="task_row" runat="server">
       <td>{TaskName}</td>
       <td>{Status}</td>
     </tr>
    <!--  END Row -->
    
  4. Add the Before Show Row event to the Tasks grid.
  5. Add a variable called Counter below the 'End Forms Definition section
  6. 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_row As System.Web.UI.HtmlControls.HtmlTableCell = DirectCast(e.Item.FindControl("task_row"),System.Web.UI.HtmlControls.HtmlTableCell)
    If Counter = 0 Then 
      task_row.Attributes("Class") = "Row"
      Counter = 1 
    Else 
      task_row.Attributes("Class") = "AltRow"
      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_row = (System.Web.UI.HtmlControls.HtmlTableCell)e.Item.FindControl("task_row");
    if (Counter == 0) { 
      task_name_td.Attributes["Class"] = "Row";
      Counter = 1;
    } else {
      task_name_td.Attributes["Class"] = "AltRow";
      Counter = 0;
    } 
  }

See also:

Before Show Row event


On-line, printable versions and updates