A Templated databound Repeater control with per-row template selection

• Download demo project (includes source) - 12.1 Kb

Introduction

This week I stumbled across a problem. I had to display the details of an order. Usually, I just grab a repeater and presto. But this time, there was something different. Some rows inside the order row collection were not order rows. For example, my collection would contain 3 OrderRows and one OrderDescription row.

I had to generate output like this:

I'm not trying to have any discussion of the usefulness or the content of this example. The basic thing is that this cannot be easily done with a generic Repeater.

Intended Solution

I wanted to be able to dynamically decide which template to use for each element in my collection. This required me to be able to describe multiple templates in my .asp code:

<cc:MyRepeater id="order" runat="server">
  <ItemTemplate forClass="OrderRow">
    <tr>
      <td><%# DataBinder.Eval(Container.DataItem, "Name")%></td>
      <td><%# DataBinder.Eval(Container.DataItem, "Price", "C")%></td>
      <td><asp:Button id="Remove" CommandName="remove" runat="server"/></td>
    </tr>
  </ItemTemplate>
  <ItemTemplate forClass="OrderDescription">
    <tr>
      <td colspan="3"><%# DataBinder.Eval(Container.DataItem, "Name")%></td>
    </tr>
  </ItemTemplate>
</cc:MyRepeater>

During my research, I came upon some pretty nasty stuff that didn't seem possible. After some tedious searching however, I found the solution.

Solution

I had to resort to a small change in the model described above. It was not only not possible to add properties to different ItemTemplates, it also wasn't possible to dynamically define ITemplate properties. I solved this problem by wrapping the different templates into subobjects, as follows:

<cc:ObjectRepeater id="order" runat="server">
  <ObjectTemplate name="orderRow">
    <ItemTemplate>
      <tr>
        <td><%# DataBinder.Eval(Container.DataItem, "Name")%></td>
        <td><%# DataBinder.Eval(Container.DataItem, "Price", "C")%></td>
        <td><asp:Button id="Remove" CommandName="remove" runat="server"/></td>
      </tr>
    </ItemTemplate>
  </ObjectTemplate>
  <ObjectTemplate name="description">
    <ItemTemplate>
      <tr>
        <td colspan="3"><%# DataBinder.Eval(Container.DataItem, "Name")%></td>
      </tr>
    </ItemTemplate>
  </ObjectTemplate>
</cc:ObjectRepeater>

I also added a delegate to my ObjectRepeater that allows me to determine which template to select. This delegate can be assigned in your code behind. The delegate must return the name of the template to use for the item that is currently databound. For example:

private void Page_Load(object sender, System.EventArgs e)

{
    order.DetermineTemplate = 
      new ObjectRepeaterDetermineTemplateDelegate(this.determineTemplate);
}

public string determineTemplate(object sender, object dataItem)

{
   if(dataItem is OrderRow)
      return "orderRow";
   else
      return "description";

}

This delegate can also be used to check certain properties of your DataItem, instead of just checking the class type.

Implementation Details

To be able to implement this solution, I had to develop a templated databound custom control as is described in MSDN quite well.

The problem can be divided into three parts:

1. How to define and parse the different ObjectTemplates.
2. How to dynamically determine the template to use.
3. How to make the Repeater save its state in ViewState so postbacks work as expected.

Problem #1

To be able to dynamically add objects, I've overridden AddParsedSubObject() and I implemented a ControlBuilder. The ControlBuilder and AddParsedSubObject() work in team to remember the defined ObjectTemplates into a private collection named _templates.

Please look at the attached project for details, because this is not really rocket science.

The trick lies into adding an ITemplate property to the ObjectTemplate class, and including a [TemplateContainer(typeof(RepeaterItem))] attribute to that property. Because the ASP parser detects that my ObjectTemplate is also a control, it nicely turns this object into a template.

Problem #2

In the code for CreateItem, these is a point where a child row gets created:

private RepeaterItem CreateItem(int itemIndex, 
      ListItemType itemType, bool dataBind, object dataItem)
{
  RepeaterItem item = new RepeaterItem(itemIndex, itemType);

  RepeaterItemEventArgs e = new RepeaterItemEventArgs(item);

  //decide which template to use.

  string templateName = null;

  if(dataBind)
  {
    if(DetermineTemplate != null)
    {
      templateName = this.DetermineTemplate(this, dataItem);
      ViewState["templateName" + itemIndex.ToString()] = templateName;
    }
  }
  else
  {
    //determine template to use from viewState;

    templateName = (string)ViewState["templateName" + itemIndex.ToString()];
  }

  if(templateName == null)
    templateName = this.DefaultTemplate;

  CustomDynamicTemplate dynamicTemplate = 
       (CustomDynamicTemplate)_templates[templateName];

  //Must exist.

  dynamicTemplate.ItemTemplate.InstantiateIn(item);
   
  if (dataBind)
  {
    item.DataItem = dataItem;
  }
  OnItemCreated(e);
  this.Controls.Add(item);

  if (dataBind)
  {
    item.DataBind();
    OnItemDataBound(e);

    item.DataItem = null;
  }

  return item;
}

For each row, I call a delegate (your delegate) to determine the name of the template. I then look it up in my HashTable of templates and do a InstantiateIn(). The rest of the code is very similar to Microsoft's example of databound templated custom controls.

Problem #3

The final problem lies in that the used template (per row) must be maintained in ViewState, otherwise postback event will not fire, or worst, will fire for the incorrect row.

In the above code, I maintain ViewState attributes so that the used template for each row is remembered. After postback, this ViewState value is retrieved and used instead.

Final Notes

I've looked around the internet for more on this specific subject, and found little or none about adding dynamic templates. Most people seemed to be stuck on a simpler problem, namely dynamically selecting templates for a whole DataGrid or Repeater, and not on a per-row basis. Personally, I see a lot of potential for this kind of a Repeater object, especially when you repeat amongst a collection of classes that may (or may not) be subclasses of each other. Your biggest advantage is not having to code all your variations in a server control (.cs class), or writing a lot of <% if .. %> code inside your template definitions.

In conclusion, I hope you liked this article, and maybe you have some use for this class as good as I did! If so, please vote.. (if you didn't, please vote as well).