asp.net wrap a div on a repeater every 3 results

Question

I don't do asp.net but project I am on is built in it so sorry if this is a really simple question:

The following code pulls the results ok fine but I would like to add a wrapper around every 3 results if possible

<asp:Repeater ID="rptPendingCourses" runat="server" OnItemDataBound="rptPendingCourses_ItemDataBound">
    <ItemTemplate>
        <div class="coursesContainer">
            <div class="coursesContent as">
                <p class="title"><a onclick="linkcourse('<%#DataBinder.Eval(Container.DataItem, "CourseID")%>');return false;" href="#" title='Launch <%# DataBinder.Eval(Container.DataItem, "CourseTitle")%>'><%# System.Web.HttpUtility.HtmlEncode((String)(DataBinder.Eval(Container.DataItem, "CourseTitle").ToString().Length > 25 ? DataBinder.Eval(Container.DataItem, "CourseTitle").ToString().Remove(22) + "..." : DataBinder.Eval(Container.DataItem, "CourseTitle")))%></a></p>
                <ajax:Rating ID="courseRating" runat="server" Visible="false" MaxRating="5" ReadOnly="true"BackColor="Transparent"StarCssClass="ratingStar png" EmptyStarCssClass="emptyRatingStar png" WaitingStarCssClass="waitingRatingStar png" FilledStarCssClass="filledRatingStar png" />
                                <div class="clear"></div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

So would like it to wrap each 3 results so would be something like

<div class="courseWrapper">
  <div class="courseContainer">......</div>
  <div class="courseContainer">......</div>
  <div class="courseContainer">......</div>
</div>

<div class="courseWrapper">
  <div class="courseContainer">......</div>
  <div class="courseContainer">......</div>
  <div class="courseContainer">......</div>
</div>

Thanks in advance

CS Code:

/* Pending Courses */
rptPendingCourses.DataSource = pendingCourses();
rptPendingCourses.DataBind();

public DataSet pendingCourses()
    {
        DataSet dataSet = new DataSet();
        User user = (User)Context.Items["CurrentUser"];

        SqlConnection selectConnection = new SqlConnection(ConfigurationSettings.AppSettings["DBConnectStr"]);
        SqlDataAdapter adapter = new SqlDataAdapter("dbo.procCataloguesGetAllCoursesByRating", selectConnection);
        adapter.SelectCommand.CommandType = CommandType.StoredProcedure;

        // get results
        adapter.SelectCommand.Parameters.Add("@FilterByDomain", SqlDbType.Bit).Value = 0;
        if (user.Domain.Guid != Guid.Empty) {
            adapter.SelectCommand.Parameters.Add("@DomainID", SqlDbType.UniqueIdentifier).Value = user.Domain.Guid;
        }
        adapter.SelectCommand.Parameters.Add("@Culture", SqlDbType.VarChar, 6).Value = System.Threading.Thread.CurrentThread.CurrentCulture.Name;
        adapter.SelectCommand.Parameters.Add("@IsEnabled", SqlDbType.Bit).Value = 1;
        adapter.SelectCommand.Parameters.Add("@DomainAdminID", SqlDbType.UniqueIdentifier).Value = Guid.Empty;

        try
        {
            dataSet = new DataSet();
            adapter.Fill(dataSet);
        }
        catch (Exception exception)
        {
            dataSet.Dispose();
            dataSet = null;
            LMS_DB.LMS_DB.LogErrorEvent(exception.Message, AuditEntryType.CatalogueCoursesGetCourses);
        }
        finally
        {
            if (selectConnection.State == ConnectionState.Open)
            {
                selectConnection.Close();
            }
        }
        return dataSet;
    }

protected void rptPendingCourses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        DataRowView dataItem = (DataRowView)e.Item.DataItem;
        if (Convert.ToBoolean(dataItem.Row["RatingsEnabled"]))
        {
            Rating rating = (Rating)e.Item.FindControl("courseRating");
            rating.Visible = true;
            rating.CurrentRating = Convert.ToInt32(dataItem.Row["AverageRating"]);
        }

    }

Answer 1

If you use a ListView Control to display your data, you have an option to specify a <GroupTemplate> along with a GroupItemCount attribute:

<asp:ListView
        GroupItemCount="3" 
        ID="rptPendingCourses"
        runat="server"
        OnItemDataBound="rptPendingCourses_ItemDataBound">
    <LayoutTemplate>
        <div runat="server" ID="groupPlaceholder"></div>
    </LayoutTemplate>
    <GroupTemplate>
        <div class="courseWrapper">
            <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
        </div>
    </GroupTemplate>
    <ItemTemplate>
    <div class="coursesContainer">
        <div class="coursesContent as">
            <p class="title"><a onclick="linkcourse('<%#DataBinder.Eval(Container.DataItem, "CourseID")%>');return false;" href="#" title='Launch <%# DataBinder.Eval(Container.DataItem, "CourseTitle")%>'><%# System.Web.HttpUtility.HtmlEncode((String)(DataBinder.Eval(Container.DataItem, "CourseTitle").ToString().Length > 25 ? DataBinder.Eval(Container.DataItem, "CourseTitle").ToString().Remove(22) + "..." : DataBinder.Eval(Container.DataItem, "CourseTitle")))%></a></p>
            <ajax:Rating ID="courseRating" runat="server" Visible="false" MaxRating="5" ReadOnly="true" BackColor="Transparent" StarCssClass="ratingStar png" EmptyStarCssClass="emptyRatingStar png" WaitingStarCssClass="waitingRatingStar png" FilledStarCssClass="filledRatingStar png" />
                            <div class="clear"></div>
        </div>
    </div>
    </ItemTemplate>
</asp:ListView>

Then, for the OnItemDataBound event, I think you need to change it into this:

protected void rptPendingCourses_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        ListViewDataItem listItem = (ListViewDataItem)e.Item;
        DataRowView dataItem = (DataRowView)listItem.DataItem;
        if (Convert.ToBoolean(dataItem.Row["RatingsEnabled"]))
        {
            Rating rating = (Rating)e.Item.FindControl("courseRating");
            rating.Visible = true;
            rating.CurrentRating = Convert.ToInt32(dataItem.Row["AverageRating"]);
        }
    }
}