Render child items with their own layout in a carousel control

Question

Here is what I am trying to do:

I have a content item "Carousel Presenter". Essentially this will present its child items within the carousel. I want the flexibility to have any number of child items. I also want the flexibility to be able to specify the presentation of each child item - they may be the same or different. I am using Sitecore 6.5.

The carousel is jcarousel. I need to generate markup generally like this (from item "Carousel Presenter"):

<div class="jcarousel">
    <ul>
        <li> ... MARKUP FROM ITEM 1 ... </li>
        <li> ... MARKUP FROM ITEM 2 ... </li>
        ... and so on
    </ul>
</div>

Here is what I have tried:

• Created sublayout "carousel presenter.ascx", markup:

Codebehind:

  protected void Page_Load(object sender, EventArgs e)
    {
        // Get all children and render them inside the <ul>
        var kids = Sitecore.Context.Item.GetChildren();
        foreach (Item snippet in kids)
        {
            // RENDER THE ITEMS HERE INTO THE PLACEHOLDER...
            // Get the first rendering from item's presentation definition
            RenderingReference rendering = snippet.Visualization.GetRenderings(Sitecore.Context.Device, false).FirstOrDefault();
            // We assume that its a Sublayout, but you can also check for xslt and create an XslFile() object
            Sublayout sublayout = new Sublayout();
            sublayout.DataSource = snippet.Paths.FullPath; // creates a reference to the snippet item, so you can pull data from that later on
            sublayout.Path = rendering.RenderingItem.InnerItem["Path"];
            sublayout.Cacheable = rendering.RenderingItem.Caching.Cacheable;
            // Copy cache settings
            if (rendering.RenderingItem.Caching.Cacheable)
            {
                sublayout.VaryByData = rendering.RenderingItem.Caching.VaryByData;
                sublayout.VaryByDevice = rendering.RenderingItem.Caching.VaryByDevice;
                sublayout.VaryByLogin = rendering.RenderingItem.Caching.VaryByLogin;
                sublayout.VaryByParm = rendering.RenderingItem.Caching.VaryByParm;
                sublayout.VaryByQueryString = rendering.RenderingItem.Caching.VaryByQueryString;
                sublayout.VaryByUser = rendering.RenderingItem.Caching.VaryByUser;
            }
            // Now render the sublayout to the placeholder
            carouselItemsPh.Controls.Add(sublayout);
        }
    }

Note that I stole most of this code from here: Temporarily change a Sitecore item's layout

• Created child items in content tree, beneath content item "Carousel Presenter" which are "Carousel Items", with a sublayout control assigned to each (via standard values in configuration/layout).

Everything is published.

When I hit my test page markup is generated for each of the child items ("Carousel Items"), and the carousel works, but it looks like the Datasource is not being assigned properly - the datasource/context of all child items is the parent item, despite setting the Datasource explicitly when I create the child controls. How do I fix this?

Is there a better approach to what I am trying to achieve in Sitecore 6.5?

Thanks

Answer 1

The user controls/sublayouts for your child items need to programmatically read the datasource. For this job I always have my own 'base' Sublayout class which handles the datasource issue for user controls. In my base class I default to using Sitecore.Context.Item if the datasource has not been set. The code is as follows:

public class SublayoutBase : UserControl
{
    private Item _dataSource;

    public Item DataSource
    {
        get
        {
            if (_dataSource == null)
            {
                if (Parent is Sublayout)
                {
                    _dataSource =
                        Sitecore.Context.Database.GetItem(((Sublayout)Parent).DataSource);
                }
                if (_dataSource == null)
                {
                    _dataSource = Sitecore.Context.Item;
                }
            }
            return _dataSource;
        }
    }

    protected override void OnLoad(EventArgs e)
    {
        foreach (Control c in Controls)
        {
            SetFieldRenderers(DataSource, c);
        }
        base.OnLoad(e);
    }

    private void SetFieldRenderers(Item item, Control control)
    {
        if (item != null)
        {
            var ctrl = control as Sitecore.Web.UI.WebControl;
            if (ctrl != null && !string.IsNullOrEmpty(ctrl.DataSource))
            {
                //don't set the source item if the DataSource has already been set. 
                return;
            }
            if (control is FieldRenderer)
            {
                var fr = (FieldRenderer)control;
                fr.Item = item;
            }
            else if (control is Image)
            {
                var img = (Image)control;
                img.Item = item;
            }
            else if (control is Link)
            {
                var link = (Link)control;
                link.Item = item;
            }
            else if (control is Text)
            {
                var text = (Text)control;
                text.Item = item;
            }
            else
            {
                foreach (Control childControl in control.Controls)
                {
                    SetFieldRenderers(item, childControl);
                }
            }
        }
    }
}

Answer 2

I tend to create a Repeater for things like this.

You can do something like:

<div class="jcarousel">
    <asp:Repeater id="repeater" runat="server">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                ..markup from item such as:
                <sc:FieldRenderer FieldName="Title" runat="server" id="titlefield" Item="<%# Container.DataItem %>" />
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>

Then in CodeBehind all you need to do is something like:

protected void Page_Load(object sender, EventArgs e)
{
    repeater.DataSource = Sitecore.Context.Item.GetChildren(); // Could also make a LINQ statement where you make sure Children are of specific template if required
    repeater.DataBind();
}

Of course, it depends what's on your child item SubLayouts whether you can use something like this