Creating Collapsible Detail Regions in a RepeaterBy Scott Mitchell
There are many ways to make a Web page unusable, from cluttered content to poor page layout to non-contrasting colors. One of the simplest ways to quickly render a page unusable is to present "data overload." A page that suffers from data overload is one that displays way too much information on a single page. For example, one that shows dozens of database records, with each record having dozens of fields.
In this article we'll examine how to display data in collapsible manner using a Repeater. By the end of this article you'll have the complete code and concepts for creating such a slick user interface yourself, and helping prevent against data overload in your Web applications.
Showing and Hiding Content Through Client-Side Actions
For several years now - since the 4.x browser versions - it is quite possible (and relatively easy) - to have contents on a Web page be hidden or displayed based on a client-side action. For example, the contents of a
<div>tag can be dynamically hidden in response to clicking a button, or the contents of a paragraph (that is, the contents inside the
<p>tag), could be displayed when mousing over some other content region.
The "trick" behind showing and displaying data in a Web page is setting the element's
style settings. The following HTML snippet shows how to hide and display content by toggling these style settings for a
particular HTML element with the click of a button; you can test out the HTML in the interactive demo following the code
visiblity style settings, thereby dynamically showing or hiding the element. This
is all done on the client-side, and does not require a postback. Note that to modify the style for an element we use
document.getElementById(id) method to retrieve the element by its ID; next, we set its appropriate
properties. A thorough discussion on DHTML is far beyond the scope of this article, especially since there are plenty of great resources
on this topic all around the Web.
Displaying Details in a Collapsible Interface
With a little effort this concept can be applied to the data displayed in an ASP.NET Web page. If you have a page that needs to show a lot of fields per record, the page can quickly become unwieldy. For example, imagine that we wanted to display information about the FAQs at ASPFAQs.com. Each FAQ is stored as a record in the
tblFAQstable, containing information such as the FAQ, the answer, the number of times the FAQ has been viewed, who submitted the FAQ, and other pertinent information. We may want to display this information on an ASP.NET Web page using a Repeater. To accomplish this we could use the following Repeater syntax:
As the live demo illustrates, this leads to a bit of information overload, in large part because the answer for each FAQ can be quite lengthy.
Rather than display this large amount of data for each FAQ, a more manageable user interface would be to display just the
FAQ questions, making them clickable. When a user clicked such a header, it would expand to show the details for the FAQ,
First, we need to create two
<div>s for each record: one that displays the FAQ question, and one that
has the detailed information (the answer, the view count, and so on). The first
<div> will always be
displayed for each record and, when clicked, will toggle the display for its related details
<div>. In order
to accomplish this, each
<div> will need to be given a unique
id value, which will be referenced
will have the
hindex, where index is the
ItemIndex of the Repeater item.
<div> will have the
The following shows the
ItemTemplate for our collapsible Repeater, along with some CSS classes to improve
There are a couple of things to note in the code. First, notice how the two
<div> elements in each
ItemTemplate are given an
id that includes the RepeaterItem's index value. This index value is
taken from the
ItemIndex property. Additionally, the header
<div> as a client-side
onclick event that calls the
style settings for that row's details
To see the collapsible Repeater in action, be sure to check out the live demo. Hopefully you'll agree that the page is much cleaner and no longer suffers from information overload.