Question

I’ve never created a custom control, so barring that in mind here is my question:

Is it possible to create a custom control with nested repeaters?

The usage would be something like this:

<tag:NestedRepeater id="foo" runat="server" levels="6"/>

I currently have 6 identical repeaters nested within each other. I then use the ItemDataBound event to bind the child who then binds its child. How does this chaining of events occur within a custom control? I’d like to be able to just have one repeater template that references itself. Is that possible?

Is there anything obvious that I’m overlooking or should know before attempting to do this?

Answer 1

This is certainly possible and simple – you have to create a templated control to accept header, footer and item templates. Here’s what I would do

1. Inherit my control from Repeater it self so that I don’t have to provide code for template properties.

2. Add additional properties such as Levels. Also add a property such as NestedPlaceholderId that will tell me container control id where to nest the child repeater.

3. Override methods such as OnItemDataBound to prevent raising default ItemDataBoundEvent. My implementation would raise a custom event (say NestedItemDataBound) that will pass the current nesting level via event argument properties. Consumer is expected to send appropriate data source via event args property.

4. If consumer provides the data source then use NestedPlaceholderId to locate the placeholder within given item. Create new nested repeater and add it to the placeholder, sets its templates to same as current one, set its event handlers so that you can bubble the ItemDataBound event and finally set the data source and bind it.

So that you can use syntax for using control such as

<tag:NestedRepeater id="foo" runat="server" levels="6" NestedPlaceholderId="Nested">
  <ItemTemplate>
    <p>
           <span>[some data binding expression]</span>
           <div class="nested">
              <asp:PlaceHolder runat="server" ID="Nested" /></li>
           </div>
        </p>
  </ItemTemplate>
</tag:NestedRepeater>