asp.net c# tutorials and examples code for web developers

Saturday, February 14, 2009

How to add rows and cells (columns) in a table dynamically

Add rows and cells (columns) in a table dynamically
asp.net table server control allow us to display a table on a web page and program in server code. both TableRow and TableCell server control help us to display content in a table. TableRow control act as a row in a table control and TableCell control act as a cell (column) in table. TableCell control work as a html td element.

we can add or remove row and cell (column) in a table control programmatically at run time. the following example code demonstrate us how can we add rows and cells at run time in a table control. in this code we create two textbox to input how many rows and cells we want to add dynamically in specified table server control. when someone input numbers in textboxes and click the submit button, it add specified rows and columns in table.

table Rows property supports a collection of TableRow objects. we can add a row to the table by add a tableRow object to this collection. similarly TableRow object have a Cells property that support a collection of TableCell objects. we can add cell to a TableRow object by add a TableCell to this collection.
DynamicTableExample.aspx
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e) {
        int rows = Int32.Parse(TextBox1.Text);
        int columns = Int32.Parse(TextBox2.Text);
        for (int row = 0; row < rows; row++ )
        {
            TableRow newRow = new TableRow();
            Table1.Controls.Add(newRow);
            for (int column = 0; column < columns; column++ )
            {
                TableCell newCell = new TableCell();
                newCell.Text = "Cell" + row.ToString();
                newCell.Text += "; Column" + column.ToString();
                newCell.BorderStyle = BorderStyle.Solid;
                newCell.BorderWidth = Unit.Pixel(1);
                newCell.BorderColor = System.Drawing.Color.DodgerBlue;
                newRow.Controls.Add(newCell);
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to add cell and column in a table programmatically</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Green">Table: Programmatically add Cell and Column</h2>
        <asp:Label 
             ID="Label1" 
             runat="server"
             Font-Bold="true"
             ForeColor="HotPink"
             Text="Rows"
             >
        </asp:Label>
        <asp:TextBox 
             ID="TextBox1" 
             runat="server" 
             BackColor="HotPink"
             ForeColor="FloralWhite"
             >
        </asp:TextBox>
        <br />
        <asp:Label 
             ID="Label2" 
             runat="server"
             Font-Bold="true"
             ForeColor="HotPink"
             Text="Columns"
             >
        </asp:Label>
        <asp:TextBox 
             ID="TextBox2" 
             runat="server" 
             BackColor="HotPink"
             ForeColor="FloralWhite"
             >
        </asp:TextBox>
        <br /><br />
        <asp:Button 
             ID="Button1" 
             runat="server" 
             Font-Bold="true"
             ForeColor="HotPink"
             OnClick="Button1_Click"
             Text="Create Table"
             />
        <br /><br />
        <asp:Table 
             ID="Table1" 
             runat="server"
             BorderWidth="1"
             BorderColor="DodgerBlue"
             >
        </asp:Table>
    </div>
    </form>
</body>
</html>
Related asp.net examples