Repeater displays a list of items with a custom template. Our repeater shows the top 10 items. Instead of regular pagination, we have a Show More link. On clicking the link, we show all the remaining items.

We create a repeater with HeaderTemplate, ItemTemplate and FooterTemplate. HeaderTemplate begins an unordered list using the ul tag. ItemTemplate uses the li tag to show a list of items. FooterTemplate has the Show More link. It also ends the unordered list.

Bind the Repeater to a SqlDataSource. Handle the OnItemDataBound event. In the handler, show only the top 10 items and hide the remaining. From the 11th item onwards, use the style, display: none to hide the items.

We need some Javascript for Show and Hide buttons. In the show function, show the remaining items. In the hide function, we hide all items other than the top 10.

As you can see, Repeater is a powerful control with custom template. For our simple list, we have used an unordered list. But, we can create more complex layout with div tag.

Repeater with Show more link to display all items.
Tagged on: