I want to use a "grid system" to house my dynamically created controls (conditionally created, based on user selections) on a web page. I am creating an html table, the controls, and then adding the controls to the html table row cells.
The problem is that I want (similar to "Span" counts in WPF) to be able to span some controls over multiple cells, such as long strings.
This code:
protected override void CreateChildControls()
{
base.CreateChildControls();
LiteralControl message = new LiteralControl();
message.Text = DisplayMessage;
Controls.Add(message);
int selectionMadeOnEditor = 0; // TODO: Make this dynamic; this is just for testing
HtmlTable tbl = null;
switch (selectionMadeOnEditor)
{
case 0:
tbl = GeneratePlatypoisons();
break;
case 1:
//Console.WriteLine(5);
break;
default:
tbl = GenerateMorayEelLikeElectricity();
break;
}
this.Controls.Add(tbl);
. . .
private HtmlTable GeneratePlatypoisons()
{
HtmlTable dynamicTable = new HtmlTable();
// Create Row 1
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell();
var cell2 = new HtmlTableCell();
var cell3 = new HtmlTableCell();
var cell4 = new HtmlTableCell();
var cell5 = new HtmlTableCell();
var cell6 = new HtmlTableCell();
row.Cells.Add(cell1);
row.Cells.Add(cell2);
row.Cells.Add(cell3);
row.Cells.Add(cell4);
row.Cells.Add(cell5);
row.Cells.Add(cell6);
dynamicTable.Rows.Add(row);
// Populate row 1
LiteralControl section1Hdr = new LiteralControl("<h2>Section 1: Platypus Information</h2>");
LiteralControl section2Hdr = new LiteralControl("<h2>Section 2: PoisonToe Information</h2>");
cell1.Controls.Add(section1Hdr);
cell5.Controls.Add(section2Hdr);
// Create Row 2
var row2 = new HtmlTableRow();
var cell2_1 = new HtmlTableCell();
var cell2_2 = new HtmlTableCell();
var cell2_3 = new HtmlTableCell();
var cell2_4 = new HtmlTableCell();
var cell2_5 = new HtmlTableCell();
var cell2_6 = new HtmlTableCell();
row2.Cells.Add(cell2_1);
row2.Cells.Add(cell2_2);
row2.Cells.Add(cell2_3);
row2.Cells.Add(cell2_4);
row2.Cells.Add(cell2_5);
row2.Cells.Add(cell2_6);
dynamicTable.Rows.Add(row2);
// Populate Row 2
LiteralControl reqDateStr = new LiteralControl("PoisonToe Date:");
cell2_1.Controls.Add(reqDateStr);
boxRequestDate = new TextBox();
boxRequestDate.Text = DateTime.Today.ToShortDateString();
cell2_2.Controls.Add(boxRequestDate);
LiteralControl payAmtStr = new LiteralControl("Platypus Amount:");
cell2_3.Controls.Add(payAmtStr);
boxPaymentAmount = new TextBox();
cell2_4.Controls.Add(boxPaymentAmount);
LiteralControl reqNameStr = new LiteralControl("PoisonToe Name:");
cell2_5.Controls.Add(reqNameStr);
boxRequestorName = new TextBox();
cell2_6.Controls.Add(boxRequestorName);
// Populate row 3
// Populate row 4
// Populate row 5
// Populate row 6
// Populate row 7
return dynamicTable;
}
I added the literal controls/strings to cell1 and cell5:
cell1.Controls.Add(section1Hdr);
cell5.Controls.Add(section2Hdr);
...in the hopes that the first one would span cells 1 through 4, and the second one would span cell 5 and 6, but no go, as you can see here:
What do I need to do to allow these strings to stretch out horizontally, rather than cram themselves to crampiness, leading to my crabbiness?
Using Malachi's accepted answer, I was able to sveltify my Row 1 code (Row 2 remains the same):
// Create Row 1
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell();
var cell2 = new HtmlTableCell();
row.Cells.Add(cell1);
row.Cells.Add(cell2);
dynamicTable.Rows.Add(row);
// Populate row 1
LiteralControl section1Hdr = new LiteralControl("<h2>Section 1: Platypus Information</h2>");
LiteralControl section2Hdr = new LiteralControl("<h2>Section 2: PoisonToe Information</h2>");
cell1.ColSpan = 4;
cell2.ColSpan = 2;
cell1.Controls.Add(section1Hdr);
cell2.Controls.Add(section2Hdr);
In an HTML Table you can actually code this like so:
<table>
<tr>
<td colspan="4">
Platypus Information
</td>
<td colspan="2">
PoisonToe Information
</td>
</tr>
<tr>
<td>Poison Toe Date</td>
<td><textBox /></td>
<td>Platypus Amount</td>
<td><textBox/></td>
<td>Poison Toe Name</td>
<td><textBox /></td>
</tr>
</table>
There is an Attribute that you can give your Cell
var cell1 = new HtmlTableCell();
cell1.ColSpan = 4;
row.Cells.Add(cell1);
the ColSpan Property assigns the Attribute when the HTML is rendered by the Server.