March 1, 2021
Hot Topics:

Managing Complex Layout and Nesting DataGrids in ASP.NET

  • By Paul Kimmel
  • Send Email »
  • More Articles »

This article follows up on the article, Using Nested DataGrids in ASP.NET.


The DataList, DataGrid, Repeater, and plain old HTML can be used to create some advanced presentations in ASP.NET. In this article—a continuation of a three-part article—I will demonstrate how to intersperse HTML table rows and cells across DataList templates to intimately manage the appearance of a DataList. In addition, I will demonstrate how to nest a DataGrid in a DataList, and the best way to manage the presentation and code-behind for control nesting by using a UserControl.

All of the skills in the previous article and this article are beneficial precursors for creating presentation layers that easily model complex data relationships. After you have read the first two articles, you will be prepared for the third, and for implementing the most complex graphical user interfaces for the Web. All that you will need to bring to the table is a modicum of visual good taste. (Unfortunately, this is something that my left brain is not prepared to teach.)

Spanning an HTML Table Across Template Sections

A DataGrid is approximately an advanced form of an HTML table that coordinates the vertical and horizontal alignment of data, including data that plays the role of header and footer information with data that comprises the content. A symmetric appearance, while not especially artistic, does lend itself to good order. There are times that you may not necessarily want to use a DataGrid but want to constrain the appearance of data. For example, the Repeater is a faster, read-only control that displays collections of data like the DataGrid, and the DataList is a read-write control that behaves like the Repeater; it repeats template-described content.

If you choose to use the DataList or Repeater, but want grid-like organization, you can intersperse the rows and cells of an HTML table across the template regions of a DataList or Repeater. The visual result is that values in the header and footer sections can be made to align themselves with related values in the selected, item, and edit sections of the DataList or Repeater. (We'll demonstrate with a DataList. Simply keep in mind that the demonstrated technique can be applied to the Repeater control too.)

The Road Less Taken

New developers may likely be more comfortable with the very visually oriented aspect of ASP.NET design. Slightly older commandos may be more comfortable off the visual designer path, writing HTML. If you are comfortable writing HTML, you will be right at home here. If you are unfamiliar or uncomfortable writing HTML, this may be a good opportunity to broaden your skills.

The scenario for our example is to use a DataList and HTML table, and the DataList's <HeaderTemplate>, <ItemTemplate>, <SelectedItemTemplate>, and <FooterTemplate> to create a coordinated grid-like appearance. Header information will be conformed to vertically align with associated data in the item and selected-item rows, and the footer will be employed to create a simple visual effect. The result will look like a grid. The code is shown in Listing 1, and the result is shown in Figure 1. The listing is followed by an explanation.

Listing 1: Demonstrating an HTML table interwoven across template sections of a DataList to create a grid-like appearance.

1:  <%@ Page Language="vb" AutoEventWireup="false"
2:    Inherits="HTMLSpan.WebForm1"%>
3:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
4:  <HTML>
5:    <HEAD>
6:      <title>WebForm1</title>
7:      <meta content="Microsoft Visual Studio .NET 7.1"
8:      <meta content="Visual Basic .NET 7.1" name=CODE_LANGUAGE>
9:      <meta content=JavaScript name=vs_defaultClientScript>
10:     <meta content=http://schemas.microsoft.com/intellisense/
                             ie5 name=vs_targetSchema>
11:   </HEAD>
12:   <body MS_POSITIONING="GridLayout">
13:     <form id=Form1 method=post runat="server">
14:       <table>
15:         <asp:datalist id=DataList1
16:           style="Z-INDEX: 101; LEFT: 6px; POSITION: absolute;
                              TOP: 8px"
17:           runat="server" Width="100%">
18:           <HeaderTemplate>
19:         <tr bgcolor="navy" style="FONT-WEIGHT: bold;
                               COLOR: white;
20:           FONT-FAMILY: 'Courier New'">
21:           <td style="FONT-WEIGHT: bold">ID</td>
22:           <td style="FONT-WEIGHT: bold">First Name</td>
23:           <td style="FONT-WEIGHT: bold">Last Name</td>
24:           <td style="FONT-WEIGHT: bold">Email</td>
25:           <td style="FONT-WEIGHT: bold">Picture</td>
26:         </tr>
27:           </HeaderTemplate>
29:           <SelectedItemTemplate>
30:         <tr bgcolor="aliceblue" height="45px">
31:           <td style="BORDER-TOP: blue thin solid;
BORDER-LEFT: blue thin solid"> 32: <asp:LinkButton id=LinkButton1 CommandName="Select" runat="server"> 33: <%# DataBinder.Eval(Container.DataItem, "ID") %></asp:LinkButton>
34:           <td style="BORDER-TOP: blue thin solid">
35: <asp:Label id="Label2" runat="server"> 36: <%# DataBinder.Eval(Container.DataItem, "FirstName") %> 37: </asp:Label>
38:           <td style="BORDER-TOP: blue thin solid ">
39: <asp:Label id="Label3" runat="server"> 40: <%# DataBinder.Eval(Container.DataItem, "LastName") %> 41: </asp:Label>
42:           <td style="BORDER-TOP: blue thin solid">
43: <asp:Label id="Label4" runat="server"> 44: <%# DataBinder.Eval(Container.DataItem, "Email") %></asp:Label>
45:           <td align="center" valign="center" rowspan="2"
46:               style="BORDER-TOP: blue thin solid;
                  BORDER-RIGHT: blue thin solid;
                  BORDER-BOTTOM: blue thin solid">
47: <asp:Image id="Image2" Height="90px" Width="75px" 48: ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Picture") %>' 49: runat="server"></asp:Image>
50:           </td>
51:         </tr>
52:         <tr bgcolor="aliceblue" height="45px">
53:           <td style=
54:             "BORDER-LEFT: blue thin solid;
                 BORDER-BOTTOM: blue thin solid"></td>
55:           <td style="BORDER-BOTTOM: blue thin solid"></td>
56:           <td style="BORDER-BOTTOM: blue thin solid"></td>
57:           <td style="BORDER-BOTTOM: blue thin solid"></td>
58:         </tr>
59:           </SelectedItemTemplate>
60:           <FooterTemplate>
61:         <tr bgcolor="silver">
62:           <td colspan="5"> </td>
63:         </tr>
64:           </FooterTemplate>
65:           <ItemTemplate>
66:         <tr height="30px">
67:           <td>
68: <asp:LinkButton id="Linkbutton2" CommandName="Select" runat="server"> 69: <%# DataBinder.Eval(Container.DataItem, "ID") %></asp:LinkButton></td>
70:            <td>
71: <asp:Label id="Label6" runat="server"> 72: <%# DataBinder.Eval(Container.DataItem, "FirstName") %> 73: </asp:Label>
74:            <td>
75: <asp:Label id="Label7" runat="server"> 76: <%# DataBinder.Eval(Container.DataItem, "LastName") %> 77: </asp:Label>
78:            <td>
79: <asp:Label id="Label8" runat="server"> 80: <%# DataBinder.Eval(Container.DataItem, "Email") %></asp:Label>
81:            <td align="center" valign="center" rowspan="2">
82: <asp:Image id="Image1" Height="60px" Width="40px" 83: ImageUrl= 84: '<%# DataBinder.Eval(Container.DataItem, "Picture") %>'
85:                  runat="server"></asp:Image>
86:            </td>
87:          </tr>
88:          <tr height="30px">
89:            <td></td>
90:            <td></td>
91:            <td></td>
92:            <td></td>
93:          </tr>
94:            </ItemTemplate>
95:         </asp:DataList>
96:       </TABLE>
</FORM> 97: </body> 98: </HTML>

Listing 1 uses highlighting colors (color being one of the benefits of Web publishing) to illustrate how the HTML table in yellow is intertwined with the DataList template sections in green. The green sections include the template regions, such as the <ItemTemplate></ItemTemplate> beginning on line 65 and ending on line 94. The yellow sections show HTML tags, such as the table row beginning on line 66 and ending on line 87. (Lines 66 to 87 and 88 to 93 create the unselected data rows (see Figure 1.) The total effect is illustrated in Figure 1. The biggest drawback of combining an HTML table and DataList is that you must create the result by writing HTML. The designer seems incapable of rendering the effect at design time.

Click here for a larger image.

Figure 1: A DataList whose appearance is constrained by an HTML table.

By using an HTML table and a DataList, I was able to use one column and two rows for the image and just one row and column for each of the remaining data values, while keeping column headers lined up with column and row data. With a little effort, we could create a style sheet and (getting some artistic feedback), improve the total effect.

One might consider defining a UserControl with the HTML table and placing the UserControl in the DataList's ItemTemplate. The drawback with this approach is that the whole table is repeated for each row of data. By melding the HTML table and DataList controls together, the header is displayed once and just the data rows are repeated, as shown in Figure 1.

Page 1 of 2

This article was originally published on June 18, 2003

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date