Geeks With Blogs

News
Google

Aaron Li's Blog Write it down before I forget

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.

 

Posted on Friday, March 30, 2007 11:00 PM | Back to top


Comments on this post: Data-Bound Controls (2) - Built-in Layout

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Aaron Li | Powered by: GeeksWithBlogs.net