Creating Collapsible Detail Regions in a Repeater

22 Jul

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.

Client Side 


<<html xmlns=””&gt;
<head runat=”server”>
<style type=”text/css”>
font-size: larger;
font-weight: bold;
cursor: hand;
cursor: pointer;
background-color: #cccccc;
font-family: Verdana;
display: none;
visibility: hidden;
background-color: #eeeeee;
font-family: Verdana;
<script language=”JavaScript” type=”text/javascript”>
function ToggleDisplay(id) {
var elem = document.getElementById(‘d’ + id);
if (elem) {
if ( != ‘block’) { = ‘block’; = ‘visible’;
else { = ‘none’; = ‘hidden’;

<form id=”form1″ runat=”server”>
<asp:Repeater ID=”rptFAQs” runat=”server”>
<div id=’h<%# DataBinder.Eval(Container, “ItemIndex”) %>’ onclick=’ToggleDisplay(<%# DataBinder.Eval(Container, “ItemIndex”) %>);’>
<%# DataBinder.Eval(Container.DataItem, “question”)%>
<div id=’d<%# DataBinder.Eval(Container, “ItemIndex”) %>’>
<b>Date Created:</b>
<%# DataBinder.Eval(Container.DataItem, “datecreated”)%><br />
<b>FAQ Ans:</b><br />
<%# DataBinder.Eval(Container.DataItem, “questionanswer”)%>


Server Side (Code Behind)


Import Namespaces
Imports System.Data.SqlClient
Imports System.Configuration.ConfigurationManager

Connection Function

Private Function GetConnection() As SqlConnection
Dim objCon As SqlConnection = Nothing
objCon = New SqlConnection()
objCon.ConnectionString = ConnectionStrings(“con”).ConnectionString  ‘ConfigurationManager.AppSettings(“connectionString”)
Return objCon
Catch ex As Exception
‘ErrorMessage = ex.Message
End Try
Return objCon
End Function

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then
End If

End Sub
Sub BindData()
‘2. Create the command object, passing in the SQL string
Const strSQL As String = “select * from kbQuestion”

‘Set the datagrid’s datasource to the datareader and databind
Dim resultsDataSet As New DataSet()
Dim myDataAdapter As SqlDataAdapter = New SqlDataAdapter(strSQL, GetConnection())

rptFAQs.DataSource = resultsDataSet

End Sub


<add name=”con” connectionString=”server=server;database=Test;uid=sa;pwd=1234;pooling=false” providerName=”System.Data.SqlClient”/>

1 Comment

Posted by on July 22, 2011 in ASP Dot Net C#


Tags: , , , , , , ,

One response to “Creating Collapsible Detail Regions in a Repeater

  1. Yaniv

    December 1, 2011 at 2:33 pm

    Thanks!!! works prefect!!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: