AJAX Collapsible Panel Extenderwith Repeater for Details
Hi
try this example to use CollapsiblePanelExtender with Repeater to display Data from SQL Database
Step1 :- Create a new Website and add new Web page
Step2:- In Web Page
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<tr>
<td>
<asp:Panel ID="DropPanel" runat="server" BackColor="#CCFF99" Font-Size="Medium">
First Name:-
<asp:Label ID="lbl1" runat="server" Text='<%# Bind("FirstName") %>' />
</asp:Panel>
</td>
<td>
<asp:Panel ID="Panel1" runat="server" BackColor="#99FFCC" Font-Size="Medium">
<div>
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image1" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />
<asp:Label ID="Label1" runat="server" Text="Label">(Show details)</asp:Label>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
Address:- <%# DataBinder.Eval(Container.DataItem, "Address")%>
</asp:Panel>
<ajaxtoolkit:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="ContentPanel"
ExpandControlID="TitlePanel" CollapseControlID="TitlePanel" ExpandedText="(hide details)"
CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg" ExpandedImage="~/Images/collapse_blue.jpg"
ImageControlID="Image1" EnableViewState="true" TextLabelID="Label1" Collapsed="true">
</ajaxtoolkit:CollapsiblePanelExtender>
</div>
</asp:Panel>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"
SelectCommand="SELECT FirstName, Address FROM Employees"></asp:SqlDataSource>
Step3 :- In Web Page add this Javascript code
<script type="text/javascript">
function pageLoad() {
var currentBehavior = null;
var allBehaviors = Sys.Application.getComponents() ;
for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
currentBehavior = allBehaviors[loopIndex];
if( currentBehavior.get_name() == "CollapsiblePanelBehavior" ) {
currentBehavior._animation._fps=0;
currentBehavior._animation._duration=0;
}
}
}
</script>
Step4 :- In Web.Config add the connectionstring
<connectionStrings> <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/> </connectionStrings>
Hope this helps
Good Luck.
Yasser Zaid's Weblog 
Hi Yasser,
Thanks a lot . I tried your code , really its works good.
@surya :- you are welcome hope my post helps you
Hi,
Thanks for posting your sample of a collapsable panel within a repeater. It was exactly what I needed! Added your code to my repeater and it worked first time.
Rich
Salam Yasser,
Just a little addition to your cool code if you don’t mind.
Inside your repeater control:
This properly forms the table. When you do this, the two tags may show up next to each other. This can easily be fixed by adding a row separator and starting a new row after the
Thank you for posting your tip. It was very helpful.
Do you think you could post something which would make the other panels collapse when you expand one?
JazakAllah Khair wa Salam,
-Umar.
The code I pasted didn’t take. I basically said to add a table tag with a width of 100% inside a HeaderTemplate inside of the repeater control and end the table tag inside a FooterTemplate inside of the repeater, thereby properly forming the table.
Thanks for sharing. I find it’s very helpful. Your code is simple and works great.
How can you modify this code to display questions and answers by category name? The bottom line is: The detail will show all questions/answers for a specific category.
Fx: I have a table that stores category name (A, B, C, etc). I have a table that stores questions and another table that stores answers. So the output should look like this:
Category A (hide/show)
Detail
– Question 1:
– Answer 1:
– Question 2:
– Answer 2:
etc.
Category B (hide/show)
– Question 1:
– Answer 1:
– Question 2:
– Answer 2:
etc.
Thanks again for your support –