RSS

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 

hideshowdiv.aspx

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

</head>
<body>
<form id=”form1″ runat=”server”>
<asp:Repeater ID=”rptFAQs” runat=”server”>
<ItemTemplate>
<div id=’h<%# DataBinder.Eval(Container, “ItemIndex”) %>’ onclick=’ToggleDisplay(<%# DataBinder.Eval(Container, “ItemIndex”) %>);’>
<%# DataBinder.Eval(Container.DataItem, “question”)%>
</div>
<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”)%>
</div>
</ItemTemplate>
</asp:Repeater>

</form>
</body>
</html>

Server Side (Code Behind)

hideshowdiv.aspx.vb

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

Connection Function

Private Function GetConnection() As SqlConnection
SqlConnection.ClearAllPools()
Dim objCon As SqlConnection = Nothing
Try
objCon = New SqlConnection()
objCon.ConnectionString = ConnectionStrings(“con”).ConnectionString  ‘ConfigurationManager.AppSettings(“connectionString”)
objCon.Open()
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
BindData()
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())
myDataAdapter.Fill(resultsDataSet)

rptFAQs.DataSource = resultsDataSet
rptFAQs.DataBind()

End Sub

Web.Config

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

Advertisements
 
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:

WordPress.com Logo

You are commenting using your WordPress.com 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: