Using the Databound Control on a Page
The following sample shows an ASP.NET page that uses the TemplatedList control.
<%@ Page language="C#" %>
<%@ Register TagPrefix="custom" Namespace="CustomControls" Assembly="CustomControls"%>
<html>
<head>
<title>Databound Control Sample</title>
</head>
<body>
<form runat="server" ID="Form1">
<h3>TemplatedList Control Sample</h3>
<hr>
<custom:TemplatedList runat="server" id="FirstList" Font-Name="Verdana" Font-Size="16pt"
BorderColor="Gray" BorderWidth="1px" CellSpacing="0" CellPadding="2" GridLines="Both"
onItemCreated="FirstList_ItemCreated" onSelectedIndexChanged="FirstList_SelectedIndexChanged">
<ItemStyle ForeColor="Black" BackColor="#EEEEEE"/>
<AlternatingItemStyle BackColor="#DCDCDC"/>
<SelectedItemStyle ForeColor="White" BackColor="#000084"/>
<ItemTemplate>
<asp:Button runat="server" id="selectButton" CommandName="Select"
Text="Select" ForeColor="Blue"></asp:Button>
<asp:Label runat="server" Text='<%# Container.DataItem %>' ID="Label1" NAME="Label1"/>
</ItemTemplate>
</custom:TemplatedList>
<hr>
<asp:Label runat="server" id="infoLabel"></asp:Label>
<hr>
</form>
<script runat="server">
private int selectedIndex = -1;
private void LoadData()
{
ArrayList data = new ArrayList();
for (int i = 0; i < 10; i++)
{
data.Add("Item " + i);
}
FirstList.DataSource = data;
FirstList.DataBind();
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!IsPostBack)
{
LoadData();
}
}
protected void FirstList_ItemCreated(object sender, ListItemTemplatedEventArgs e) {
if (e.Item.ItemType == ListItemType.SelectedItem)
{
selectedIndex = e.Item.ItemIndex;
Button selectButton = (Button)e.Item.FindControl("selectButton");
selectButton.Enabled = false;
}
}
protected void FirstList_SelectedIndexChanged(object sender,EventArgs e)
{
if (selectedIndex != -1)
{
Control item = FirstList.Controls[0].Controls[selectedIndex];
Button selectButton = (Button)item.FindControl("selectButton");
selectButton.Enabled = true;
}
selectedIndex = FirstList.SelectedIndex;
infoLabel.Text = "SelectedIndex: " + selectedIndex;
if (selectedIndex != -1)
{
Control item = FirstList.Controls[0].Controls[selectedIndex];
Button selectButton = (Button)item.FindControl("selectButton");
selectButton.Enabled = false;
}
}
On a Web Forms page, the Table Web server control creates a general-purpose table. Rows in the table are created as TableRow Web server controls, and cells within each row are implemented as TableCell Web server controls. The Table Web server control allows us to create server-programmable tables on our Web Forms page. The TableRow and TableCell Web server controls provide a way to display the actual content for the Table control.
Comparing the Table Web Server Control to Other Table Elements
Tables are typically used not just to present tabular information, but also as a method of formatting information on a Web page. There are many ways to create tables on our Web Forms page:
HTML table: We can add a <TABLE> element from the HTML tab of the Toolbox.
HtmlTable control: This is a <TABLE> HTML element that has been converted to a control by adding the runat=server attribute. We can program this control in server code.
Table Web Server control: A Web control that allows us to create and manipulate tables using an object model that is consistent with other Web controls (for example, adding table rows and cells).
In general, when we intend to add rows and cells (columns) to the table in code at run time, we use a Table Web server control. Although we can use it as a static table with predefined rows and columns, in that case it is easier to work with the HTML <TABLE> element.
Because the Table Web server control offers an object model with typed properties that is consistent with other Web server controls, it can be easier to program than the HtmlTable control. (The model is also consistent between the Table, TableRow, and TableCell controls.)
Comparing the Table Web Server Control to Other List Web Server Controls
We might accomplish some of the functions with a Table Web server control; we can also accomplish this with the list Web server controls: the Repeater, DataList, and DataGrid controls. All of these controls render (or have the option to render) as HTML tables.
The differences between the list controls and the Table control are:
- The list controls are data-bound; they work only against a data source, whereas the Table control can display any combination of HTML text and controls, whether or not they are data-bound.
- To specify the layout of their elements the list controls use templates. The Table control supports the TableCell child control, which we can fill as we would any HTML <TD> element.
Table Web Server Control Object Model
For TableRow controls the Table control acts as a parent control. The table supports a property called Rows that is a collection of TableRow objects. We specify the rows for the table by managing this collection - adding or deleting items in it - The TableRow control in turn supports a collection called Cells of TableCell objects.
The content to be displayed in the table is added to the TableCell control. The cell has a Text property that we set to any HTML text. Alternatively, we can display controls in the cell by creating instances of, and adding controls to, the cell's Controls collection.
To control the appearance of the entire table, such as Font, BackColor, and ForeColor, the parent Table control supports properties. These properties are supported by The TableRow and TableCell controls as well, therefore, overriding the parent table appearance we can specify the look of individual rows or cells.
Binding Data to the Control
We can use the Table control (unlike the list Web server controls; see above) to display data from a database although it is not inherently data bound.
We can bind any property of a Table control to a data source as with all Web server controls. However, the Table control does not support a property that we use to display data directly. Instead, we typically add TableCell controls to the table. We can then either bind the Text property of individual TableCell controls to data, or we can add data-bound controls (such as a Label or TextBox control) to the cell.
Adding Rows and Cells to a Table Web Server Control
There are two steps to add a Table Web server control: adding the table itself, and separately adding the rows and cells. To create a static table we can add rows and columns at design time, or we can add them at run time in code.
To add a Table control to a Web Forms page;
Type an <asp: Table> element into the page.
It is common to add rows and cells to a Table Web server control at run time. Rows are objects of type TableRow. The Rows property of the Table control supports a collection of TableRow objects. We add a TableRow object to this collection to add a row to the table.
Similarly, the TableRow object has a Cells property that supports a collection of objects of type TableCell. By manipulating this collection we can add cells to a row.
To add rows and cells to a table dynamically
To add a row, create a new object of type TableRow:
TableRow tRow = new TableRow();
To add cells to the row, create one or more objects of type TableCell:
TableCell tCell = new TableCell();
Add content to the new cell. We can do this in several ways, as shown in the following table.
![InDept1.gif]()
Note Controls that we add dynamically to a Web Forms page do not automatically become part of the page's view state - when a page performs a round trip to the server; neither the controls nor their values are saved. Therefore we are responsible for saving the state of any dynamically generated controls whose values we want to preserve.
The following example shows how we can add rows and cells to a Table control. The number of rows and columns is determined by what the user enters into two text boxes. Each cell displays the row and cell number as static text.
public void Button1_Click (object sender, System.EventArgs e)
{
// Total number of rows
int rowCnt;
// Current row count
int rowCtr;
// Total number of cells per row (columns)
int cellCtr;
// Current cell counter
int cellCount;
rowCnt = TextBox1.Text.ToInt16();
cellCount = TextBox2.Text.ToInt16();
for(rowCtr=1; rowCtr <= rowCnt; rowCtr++)
{
// Create new row and add it to the table.
TableRow tRow = new TableRow();
Table1.Rows.Add(tRow);
for (cellCtr = 1; cellCtr <= cellCount; cellCtr++)
{
// Create a new cell and add it to the row.
TableCell tCell = new TableCell();
tCell.Text = "Row " + rowCtr + ", Cell " + cellCtr;
tRow.Cells.Add(tCell);
}
}
}
The subsequent example is similar to the previous one, but displays static text and a HyperLink control in each cell. The Hyperlink control navigates to a mocked-up URL, passing a mock product ID. The static text is implemented as a LiteralControl object, which is added to the cell's Controls collection just like the Hyperlink control is, because the sample combines static text and controls.
public void Button1_Click (object sender, System.EventArgs e)
{
// Total number of rows
int rowCnt;
// Current row count
int rowCtr;
// Total number of cells per row (columns)
int cellCtr;
// Current cell counter
int cellCount;
rowCnt = TextBox1.Text.ToInt16();
cellCount = TextBox2.Text.ToInt16();
for(rowCtr=1; rowCtr <= rowCnt; rowCtr++)
{
// Create new row and add it to the table.
TableRow tRow = new TableRow();
able1.Rows.Add(tRow);
for (cellCtr = 1; cellCtr <= cellCount; cellCtr++)
{
// Create a new cell and add it to the row.
TableCell tCell = new TableCell();
tRow.Cells.Add(tCell);
// Mock up a product ID.
string prodID = rowCtr + "_" + cellCtr;
// Add a literal text as control.
tCell.Controls.Add(new LiteralControl("Buy: "));
// Create Hyperlink Web Server control and add to cell
System.Web.UI.WebControls.HyperLink h = new HyperLink();
h.Text = rowCtr + ":" + cellCtr;
h.NavigateUrl = http://www.microsoft.com/net;
tCell.Controls.Add(h);
}
}
}
continue article