Put every 5 Repeater items between a div

Question

I'd like to get my items who are in my repeater get between a div and after 5 elements in a new div.

So what i currently got is this:

View:

<ItemTemplate>
    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>
    </div>
</ItemTemplate>

Code behind:

protected void DatesRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
        var data = (Components.Models.GetDatesModel)e.Item.DataItem;

        var chk = (CheckBox)e.Item.FindControl("eventDateCheckbox");
        chk.Text = data.EventTimeBegin.ToString();

        var hfd = (HiddenField)e.Item.FindControl("eventID");
        hfd.Value = data.eventID.ToString();
    }
}

And i'd like to display it like this on the view:

<div class="column">
    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>
</div>

<div class="column">
    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>
</div>

<div class="column">
    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>

    <asp:HiddenField runat="server" ID="eventID" />
    <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p>            
</div>

How can i achieve this? Thanks in advance!

Answer 1

Use a combination of Literal, Repeater PreRender event, and % Operator.

Here's how the aspx code should look like:

<asp:Repeater ID="DatesRepeater" runat="server" OnItemDataBound="DatesRepeater_ItemDataBound" 
    OnPreRender="DatesRepeater_PreRender">
    <ItemTemplate>
        <asp:Literal ID="ltDivPrefix" runat="server"></asp:Literal>
        <asp:HiddenField runat="server" ID="eventID" />
        <p><asp:CheckBox runat="server" ID="eventDateCheckbox" /></p> 
        <asp:Literal ID="ltDivSuffix" runat="server"></asp:Literal>
    </ItemTemplate>
</asp:Repeater>

The expected result is the following:

1. The text of ltDivPrefix will be <div class="column"> for nth item where n % 5 equals 0, otherwise it will be empty.
2. The text of ltDivSuffix will be </div> for nth item where n % 5 equals 4, or n is the last index, otherwise it will be empty.

The total number of items can be obtained in PreRender event, so do a looping through the Repeater items and set the text of ltDivPrefix and ltDivSuffix according to the item index:

protected void DatesRepeater_PreRender(object sender, EventArgs e)
{
    for (int i = 0; i < DatesRepeater.Items.Count; i++)
    {
        Literal ltDivPrefix = (Literal)DatesRepeater.Items[i].FindControl("ltDivPrefix");
        Literal ltDivSuffix = (Literal)DatesRepeater.Items[i].FindControl("ltDivSuffix");

        if ((i) % 5 == 0)
        {
            ltDivPrefix.Text = @"<div class=""column"">";
        }

        if ((i % 5 == 4) || (i == DatesRepeater.Items.Count - 1))
        {
            ltDivSuffix.Text = "</div>";
        }
    }
}