Home > AJAX, ASP.Net > AJAX Collapsible Panel Extenderwith Repeater for Details

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.

Advertisements
Categories: AJAX, ASP.Net
  1. surya
    November 25, 2011 at 8:25 am

    Hi Yasser,

    Thanks a lot . I tried your code , really its works good.

  2. yasserzaid
    December 3, 2011 at 7:05 pm

    @surya :- you are welcome hope my post helps you

  3. Rich
    January 17, 2012 at 11:36 pm

    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

  4. December 6, 2012 at 1:42 pm

    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.

    • December 6, 2012 at 1:43 pm

      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.

  5. Lisa
    December 22, 2012 at 5:00 pm

    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 –

  1. No trackbacks yet.

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: