Built-in Layout
We have talked about the templates for the following data-bound controls
1. GridView
2. DataList
3. Repeater
4. DetailsView
5. FormView
When the data-bound controls are finally rendered as html tags to the user’s browser, they have different built-in layout. Knowing this help us make decision of what control to use for certain requirement.
The final default html for each of these controls is a HTML table, but with different rows and columns. Sometimes the table has border, sometimes not.
The final layout could be affected by adapters or themes if they are applied. The following is the default, built-in layout of these controls
GridView
<table cellspacing="0" rules="all" border="1" id="GridView1" style="width:100%;border-collapse:collapse;">
<tr>
<th scope="col">HeaderText for Field1</th>
<th scope="col">HeaderText for Field2</th>
</tr>
<tr>
<td>VALUE for Field1 for the First Record</td>
<td>VALUE for Field2 for the First Record</td>
</tr>
<tr>
<td>VALUE for Field1 for the Second Record</td>
<td>VALUE for Field2 for the Second Record</td>
</tr>
......
</table>
*** Please notice, for this table, border="1"
DataList
<table cellspacing="0" border="0" id="FormView1" style="border-collapse:collapse;">
<tr>
<td>
Content Defined in the HeaderTemplate
</td>
</tr>
<tr>
<td>
Content Defined in the ItemTemplate(first record)
</td>
</tr>
...... more <tr></tr> for more records
<tr>
<td>
Content Defined in the FooterTemplate
</td>
</tr>
</table>
Repeater
Repeater has no built-in layout or styles.
We must explicitly declare all HTML layout, formatting, and style tags within the templates of the control.
DetailsView
DetailsView is rendered as a multi-row(<tr>) and two-column(<td>) HTML table.
<table cellspacing="0" rules="all" border="1" id="DetailsView1" style="width:100%;border-collapse:collapse;">
<tr>
<td>HeaderText for the First Field</td>
<td>Value for the First Field</td>
</tr>
<tr>
<td>HeaderText for the Second Field</td>
<td>HeaderText for the Second Field</td>
</tr>
......
</table>
*** Please notice, for this table, border="1"
FormView
Formview is rendered as a one-row(<tr>) and one-column(<td>) HTML table.
<table cellspacing="0" border="0" id="FormView1" style="border-collapse:collapse;">
<tr>
<td colspan="2">
Content Defined in the ItemTemplate
</td>
</tr>
</table>
*** Well formatted HTML tags can be used in ItemTemplate.