Nesting Repeaters with Hierarchical Data and Server-Binding

<H2>Front end code</H2>
<P>The front end code with these methods is very light and simple. The only
catch is to make sure you import the <CODE>System.Data</CODE> namespace. Even
with this method, we need to use <CODE>DataRowView</CODE> in the front end. Take
a special <B>note</B>: when you nest these <CODE>Repeater</CODE>s, the designer
will whine like a baby in a two dollar crib.</P>
<P>To pacify the baby, you need to comment out the parent <CODE>Repeater</CODE>,
if you want to return to the designer to work with other controls. You better
know markup language, if you can't code this by hand, you're already in over
your head. In that case, I would recommend w3schools.com :-).</P>
<P>Please note that the tag "<CODE>sItemTemplate</CODE>" is really supposed to
be "ItemTemplate" but something about the CodeProject rejects that in the code
block.</P>
<P>Also note that the front end does not care about the DataSource. The
container knows what source to choose for your column-name keys upon binding.
You may proceed to the server code now:</P><PRE lang=aspnet><%@ Control Language="c#" AutoEventWireup="false"
  Codebehind="NestedRepeater.ascx.cs"
  Inherits="YourProject.UserControls.NestedRepeater"
  TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Import namespace="System.Data" %>
<asp:Repeater id="AreaResults"
  OnItemDataBound="AreaResults_ItemDataBound"
  runat="server">
    <headerTemplate>
      <table border="0" cellpadding="0" cellspacing="0">
    </headerTemplate>
    <sItemTemplate>
      <tr>
        <td valign="top">
          <A href="?AreaID=<%# ((DataRowView)Container.DataItem)[" AreaID?]%>?>
            <img border="0"
              src="<%# ((DataRowView)Container.DataItem)["ImageLink"]%>"
              hspace="3px" vspace="3px" alt="View Area Detail">
          </a>
        </td>
        <td>
          <A href="?AreaID=<%# ((DataRowView)Container.DataItem)[" AreaID?]%>?>
          <%# ((DataRowView)Container.DataItem)["AreaName"]%></A> -
          <%# ((DataRowView)Container.DataItem)["AreaDescription"]%>
             <asp:Repeater id="PropertyResults" runat="server">
                <headerTemplate>
                     <table border="0" cellpadding="0" cellspacing="0">
                </headerTemplate>
                <sItemTemplate>
                  <tr>
                    <td>
                     <a href='?PropertyID=<%# ((DataRowView)
                                           Container.DataItem)["PropertyID"]%>'>
                       <%# ((DataRowView)Container.DataItem)["PropertyName"]%>
                     </a>
                    </td>
                    <td width="10"></td>
                    <td>
                     <%# ((DataRowView)Container.DataItem)["DistanceToCentroid"]%>
                    </td>
                  </tr>
                <s/ItemTemplate>
                <FooterTemplate>
                    <tr>
                      <td colspan="3" height="10"></td>
                    </tr>
                   </table>
                </FooterTemplate>
             </asp:Repeater>
        </td>
      </tr>
    </sItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater></PRE>
<H2>Server code</H2>
<P>I have given you one generic method that handles your data and binding, only
to illustrate the necessary steps. I'm quite sure, you are a master of your data
at this point so I've excluded impertinent details about data retrieval and
manipulation. Pay special attention to the comments.</P><PRE lang=cs>        protected void massageData()
        {
            DataSet resultSet = new DataSet("resultSet");
            DataTable AreaDT = new DataTable("AreaDT");
            DataTable PropertyDT = new DataTable("PropertyDT");
           
            /*
             * Populate your data tables with your chosen method
             * */

            //Add DataTables to DataSet and create the one-to-many
            //relationships (as many as you need)
            resultSet.Tables.Add(AreaDT);
            resultSet.Tables.Add(PropertyDT);
            resultSet.Relations.Add("PropertiesInArea",
                AreaDT.Columns["AreaID"],PropertyDT.Columns["AreaID"]);

            /* Important!!!  Only set the data source for the
             *  topmost parent in the heirarchy.
             * The nested repeaters that are buried in the topmost
             *  parent will not be in scope until binding
             * when using this server-style binding method. */

            AreaResults.DataSource = resultSet.Tables["AreaDT"];

            //Upon databind, you invoke the ItemDataBound Method,
            //which can be easily created by the events tab
            //under the properties of the repeater control in the designer
            AreaResults.DataBind();
            AreaResults.Visible = true;
        }</PRE>
<P>Now for the goodies. You have specified an <CODE>OnItemDataBound</CODE>
method in your front end code, so it is time to own up to your promise and
provide the method for your fickle and whiny front end code:</P><PRE lang=cs>protected void AreaResults_ItemDataBound(object sender,
                    System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
    //Only consume the items in the parent repeater
    //pertinent to nesting
    if (e.Item.ItemType == ListItemType.Item ||
              e.Item.ItemType == ListItemType.AlternatingItem)
    {
        //Now that the nested repeater is in scope, find it,
        //cast it, and create a child view from
        //the datarelation name, and specify that view as the
        //datasource.  Then bind the nested repeater!
        Repeater tempRpt =
               (Repeater)e.Item.FindControl("PropertyResults");
        if (tempRpt != null)
        {
           tempRpt.DataSource =
             ((DataRowView)e.Item.DataItem).CreateChildView("PropertiesInArea");
           tempRpt.DataBind();
        }
    }
}</PRE>