ASP.Net Nested Repeater with Paging Tutorial

In developing web applications using ASP.Net one of the most hated components of programmers is nested repeaters. I covered this topic before another tutorial found here. What I'd like to show you now is how to extend this further by paging the data source such that groups of elements show on individual pages, similar to how Google's search results are displayed.

We'll start by showing you the desired result. Pictured here is a paged and nested repeater. The outer repeater is a snippet from a discussion board where users can post messages to others. For each of these it is possible to comment on them. This is where we get the nesting requirement, as the comments are specific to the outer repeater items.

At bottom is a button which allows for navigating to the next page. In this picture we are displaying the first page, if we weren't (and not on the last page) another button would be visible allowing the action "Previous" to be handled.

Now that we have the concept let's look at how we accomplish this behavior. It should be clear that we require two distinct data sources and two repeaters. One repeater inside the other.

I have created a method which is executed inside the Page_Load(..) method of the web page as follows:

protected void SetupPaging()

{

PagedDataSource objPds = new PagedDataSource();

DataTable dt = //Retrieve outer DataTable type

bjPds.DataSource = dt.DefaultView;

objPds.AllowPaging = true;

objPds.PageSize = 10;

objPds.CurrentPageIndex = CurrentPage;

btPrev.Visible = !objPds.IsFirstPage;

btNext.Visible = !objPds.IsLastPage;

DataSet ds = new DataSet();

ds.Tables.Add(dt);

ds.Tables.Add(// Get inner repeater DataTable);

DataColumn dcPosts = ds.Tables[0].Columns["DiscussionPostID"];

DataColumn dcReplies = ds.Tables[1].Columns["DiscussionPostID"];

ds.Relations.Add(new DataRelation("replies", dcPosts, dcReplies));

rptDiscussion.DataSource = objPds;

rptDiscussion.DataBind();

}

So lets examine this piece by piece to see how this works. First we instantiate a PagedDataSource object, this type has properties for setting up how many items per page and allows for a DataPager object to control which page it is currently on. The main thing we focus on however is where we set its DataSource property. We set this to the outer table's DefaultView.

Moving on, we create a DataSet, this is going to be the aggregate of both outer and inner tables. To setup the nesting we associate the two tables with a relationship. This relationship assigns which columns in both table relate to each other. In my example image, the relationship was in the outer repeater (Primary Key) and its corresponding discussion post. Each comment was associated with this discussion post and as such we assign the column as "DiscussionPostID".

Finally we add this association to the DataSet object and bind the repeater to the PagedDataSource. Our repeater is now ready for action, the only thing left is to add some controls for getting the current page. This is a straight forward method which we add to the code behind file as follows:

public int CurrentPage

{

get

{

object o = this.ViewState["_CurrentPage"];

if (o == null)

return 0;

else

return (int)o;

}

set

{

this.ViewState["_CurrentPage"] = value;

}

}

That completes our tutorial for now, if you have any questions leave a comment and I'll get back to as best I can.