Collapsible Panel

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Discussion and Suggestions » Collapsible Panel

Shortcuts

Previous Next

Last post 09-01-2008 9:57 PM by Zhi-Qiang Ni - MSFT. 12 replies.

Sort Posts:

Collapsible Panel

08-26-2008, 8:43 PM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

I have many collapsible panels on 1 page. What is the code I need to implement so that when I click the second panel, the first one automatically collapses. Here's some sample code from my page:

<asp:Panel ID="Panel3" runat="server" CssClass="collapsePanelHeader">

September Madness!!!

</asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="Server"

TargetControlID="ContentPanel3"

ExpandControlID="Panel3"

CollapseControlID="Panel3"

Collapsed="True"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

<asp:Panel ID="ContentPanel3" runat="server" CssClass="collapsePanel">

</center>

</asp:Panel></td>

</tr>

<tr>

<td><asp:Panel ID="Panel100" runat="server" CssClass="collapsePanelHeader"> Free Birthday Invitations

</asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"

TargetControlID="ContentPanel20"

ExpandControlID="Panel100"

CollapseControlID="Panel100"

Collapsed="True"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

<asp:Panel ID="ContentPanel20" runat="server" CssClass="collapsePanel">

</center>

</asp:Panel>

Filed under: CollapsablePanel, automatic close

Re: Collapsible Panel

08-26-2008, 11:10 PM

Contact

8,380 point Star
vgiambattista
Member since 01-13-2006, 2:40 PM
Atlanta, GA
Posts 1,283

Is this a contest, because you are the second person to ask about this recently. Wink

I did some sample code for this exact scenario here: http://forums.asp.net/p/1310879/2582158.aspx

It should give you just what you need.

James

James Ashley, Magenic Technologies
(james.ashley.magenic@gmail.com)

Re: Collapsible Panel

08-27-2008, 12:26 AM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

I tried using the code you gave me on the sample website from the AJAX tutorials. I think I'm missing something because it doesn't seem to be working correctly:

panel1Behavior.collapsePanel();

}

</script>

</head>

<body>

<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">

</asp:ScriptManager>

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"

TargetControlID="ContentPanel"

ExpandControlID="TitlePanel"

CollapseControlID="TitlePanel"

Collapsed="True"

TextLabelID="Label1"

ExpandedText="(Hide Details...)"

CollapsedText="(Show Details...)"

ImageControlID="Image1"

ExpandedImage="~/images/collapse_blue.jpg"

CollapsedImage="~/images/expand_blue.jpg"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>

<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>

</asp:Panel>

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">

<h1>

<br />

Just your average MS Joe ...</h1>

 If you would like to contact me you can send email from my blog at either

of the following web sites.<p>

<a href="http://www.JoeOn.net">http://www.JoeOn.net</a></p>

<p>

<a href="http://blogs.msdn.com/JoeStagner">http://blogs.msdn.com/JoeStagner</a></p>

<p>

I'm a Program Manager on the Microsoft Web Tools and Platform. 

</p>

<p>

While my team is based in Redmond WA, I live in New England USA with my beautiful

wife and children and work wherever the job takes me. I joined Microsoft in 2001

after starting, building, and selling a .COM firm in New York City. I began as a

strategic advisor to independent software venders (ISV), moved to a position as

a Developer Technology Expert ad Technical Evangelist, and after three years I moved

to the Web Tools and Platform Team.</p>

<p>

<h2>

What do I do at Microsoft ?</h2>

<p>

You would think this should be an easy question, but it's actually not.

</p>

<p>

My job has many parts.

</p>

<p>

To communicate with Microsoft's Web Development Customers, to know as much as I

can about all web development technologies, those made by Microsoft and those made

by everyone else, and to communicate from the world to the Web development product

teams and from the web development product teams to the development community.

</p>

</asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"

TargetControlID="Panel2"

ExpandControlID="Panel1"

CollapseControlID="Panel1"

Collapsed="True"

TextLabelID="Label1"

ExpandedText="(Hide Details...)"

CollapsedText="(Show Details...)"

ImageControlID="Image1"

ExpandedImage="~/images/collapse_blue.jpg"

CollapsedImage="~/images/expand_blue.jpg"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader">

<asp:Image ID="Image2" runat="server" ImageUrl="~/images/expand_blue.jpg"/>

<asp:Label ID="Label2" runat="server">(Show Details...)</asp:Label>

</asp:Panel>

<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel">

<h1>

<br />

Just your average MS Joe ...</h1>

 If you would like to contact me you can send email from my blog at either

of the following web sites.<p>

<a href="http://www.JoeOn.net">http://www.JoeOn.net</a></p>

<p>

<a href="http://blogs.msdn.com/JoeStagner">http://blogs.msdn.com/JoeStagner</a></p>

<p>

I'm a Program Manager on the Microsoft Web Tools and Platform. 

</p>

<p>

While my team is based in Redmond WA, I live in New England USA with my beautiful

wife and children and work wherever the job takes me. I joined Microsoft in 2001

after starting, building, and selling a .COM firm in New York City. I began as a

strategic advisor to independent software venders (ISV), moved to a position as

a Developer Technology Expert ad Technical Evangelist, and after three years I moved

to the Web Tools and Platform Team.</p>

<p>

<h2>

What do I do at Microsoft ?</h2>

<p>

You would think this should be an easy question, but it's actually not.

</p>

<p>

My job has many parts.

</p>

<p>

To communicate with Microsoft's Web Development Customers, to know as much as I

can about all web development technologies, those made by Microsoft and those made

by everyone else, and to communicate from the world to the Web development product

teams and from the web development product teams to the development community.

</p>

</asp:Panel>

Re: Collapsible Panel

08-27-2008, 9:05 AM

Contact

8,380 point Star
vgiambattista
Member since 01-13-2006, 2:40 PM
Atlanta, GA
Posts 1,283

kmj,

You need to hook up this collapsePanel1 function as a handler for some other event -- presumably the expand event of your other collapsible panel extender. This is what the "hookup" function in the sample code is for. Finally, you need to add the hookup event as the parameter for the Sys.App.add_load function, to make sure all the events get hooked up when the page loads.

James

James Ashley, Magenic Technologies
(james.ashley.magenic@gmail.com)

Re: Collapsible Panel

08-27-2008, 1:04 PM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

Hi, sorry to bother you again. I went over some information from other posts from http://forums.asp.net/t/1117371.aspx and http://forums.asp.net/t/1118453.aspx.

However, I'm terrible at javascript and still have pretty much no idea what direction to go in. Is there anyway you could provide this direction or do you know of a different way to handle the problem?

If I have 14 collapsible panels on 1 page, it doesn't seem intuitive to have to write 14 different scripts. Thank you.

Re: Collapsible Panel

08-27-2008, 1:44 PM

Contact

8,380 point Star
vgiambattista
Member since 01-13-2006, 2:40 PM
Atlanta, GA
Posts 1,283

kmj,

Scripting is the downside of doing anything interesting with AJAX. I wish there was an easier way, but I don't think there is.

James

James Ashley, Magenic Technologies
(james.ashley.magenic@gmail.com)

Re: Collapsible Panel

08-29-2008, 3:43 AM

Contact

26,197 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 4:37 AM
Posts 2,345

Hi,

Form your description, I understand that you would like to collapse the other panes when one of the CollapsiblePanel is expanded which the behavior similar to the Accordion.

If I have not misunderstood you, please refer to my sample code in this thread: http://forums.asp.net/t/1304116.aspx

Maybe the sample in that thread is more complex. We simply need to use this code if all the CollapsiblePanels are in one level.

    function pageLoad(){
        var currentBehavior = null;   
        var allBehaviors = Sys.Application.getComponents() ;
        var needToQueue=[];
        for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
            currentBehavior = allBehaviors[loopIndex];
            if( currentBehavior.get_name() == "CollapsiblePanelBehavior" ) {  
                currentBehavior.add_expandComplete(CollapsiblePanel_Event_Expand);
            }
        }
    }
    function CollapsiblePanel_Event_Expand(sender, arg){  
        var id = sender.get_id();  
        var c = Sys.Application.getComponents();  
        for (var i = 0; i < c.length; i++)  {
            if(c[i].get_name() == "CollapsiblePanelBehavior" ) {  
                var currentid= c[i].get_id(); 
                //the same level
                if (currentid != id){ $find(currentid).collapsePanel();}
            }
        }
    }

Please let me know whether this helps or not.

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Re: Collapsible Panel

08-29-2008, 11:52 AM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

You understood exactly what I needed; however, I'm having trouble implementing it. I added your script and the functionality wasn't there. When I added the same behaviorids for both the collapsible panels, one would open and the other one wouldn't. Here's the code where I'm at now:

function pageLoad(){

var currentBehavior = null;

var allBehaviors = Sys.Application.getComponents() ;

var needToQueue=[];

for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {

currentBehavior = allBehaviors[loopIndex];

if( currentBehavior.get_name() && id.substring(0,16) == "CollapsiblePanelBehavior" ) {

currentBehavior.add_expandComplete(CollapsiblePanel_Event_Expand);

}

function CollapsiblePanel_Event_Expand(sender, arg){

var id = sender.get_id();

var c = Sys.Application.getComponents();

for (var i = 0; i < c.length; i++) {

if(c[i].get_name() == "CollapsiblePanelBehavior" ) {

var currentid= c[i].get_id();

//the same level

if (currentid != id){ $find(currentid).collapsePanel();}

}

</script>

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"

TargetControlID="d27"

ExpandControlID="TitlePanel"

CollapseControlID="TitlePanel"

Collapsed="True"

TextLabelID="Label1"

ExpandedText=" "

CollapsedText="(Show Details...)"

autocollapse="true"

ImageControlID="Image1"

ExpandedImage="~/images/expand.jpg"

collapsedimage="spacer.gif"

behaviorid="collapsiblepanelbehavior"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"

TargetControlID="d28"

ExpandControlID="Panel1"

CollapseControlID="Panel1"

Collapsed="True"

TextLabelID="Label2"

ExpandedText="(Hide Details...)"

CollapsedText="(Show Details...)"

behaviorid="collapsiblepanelbehavior"

SuppressPostBack="true">

</ajaxToolkit:CollapsiblePanelExtender>

Re: Collapsible Panel

08-31-2008, 10:25 PM

Contact

26,197 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 4:37 AM
Posts 2,345

Hi,

Maybe there’s some misunderstanding regarding the code in my last reply. I will try to elaborate on it.

if( currentBehavior.get_name() == "CollapsiblePanelBehavior" )

We use this code to select the CollapsiblePanelExtenders from the page’s components. The currentBehavior.get_name() function get the behavior name and all the CollapsiblePanelExtender’s behavior name are “CollapsiblePanelBehavior”, we don’t need to declare their BehaviorID as “CollapsiblePanelBehavior”. Each CollapsiblePanelExtender can only has its own BehaviorID, we can use either the ID or the BehaviorID to find the AjaxExtender by writing “$find(‘ID’)” or “$find(‘BehaviorID’)” in javascript.

Please refer to this sample code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyOneCanExpandInSameLevel.aspx.vb"
    Inherits="SoluTest_CollapsiblePanel.TestOnlyOneCanExpandInSameLevel" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <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.add_expandComplete(CollapsiblePanel_Event_Expand);
                }
            }
        }
        function CollapsiblePanel_Event_Expand(sender, arg) {
            var id = sender.get_id();
            var c = Sys.Application.getComponents();
            for (var i = 0; i < c.length; i++) {
                if (c[i].get_name() == "CollapsiblePanelBehavior") {
                    var currentid = c[i].get_id();
                    //the same level
                    if (currentid != id) { $find(currentid).collapsePanel(); }
                }
            }
        }
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="Level 1.1.1" class="collapseContainer">
            <asp:Panel ID="TitlePanel111" runat="server" CssClass="collapsePanelHeader">
                <asp:Image ID="Image1" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />Ajax
                <asp:Label ID="Label1" runat="server" Text="Label">(Show details)</asp:Label>
            </asp:Panel>
            <asp:Panel ID="ContentPanel111" runat="server" CssClass="collapsePanel">
                ASP.NET AJAX Level 1.1.1</asp:Panel>
            <ajaxtoolkit:CollapsiblePanelExtender ID="cpe111" runat="server" TargetControlID="ContentPanel111"
                ExpandControlID="TitlePanel111" CollapseControlID="TitlePanel111" TextLabelID="Label1"
                ExpandedText="(hide details)" CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg"
                ExpandedImage="~/Images/collapse_blue.jpg" SuppressPostBack="true" ImageControlID="Image1"
                Collapsed="True" EnableViewState="true">
            </ajaxtoolkit:CollapsiblePanelExtender>
        </div>
        <div id="Level 1.1.2" class="collapseContainer">
            <asp:Panel ID="TitlePanel112" runat="server" CssClass="collapsePanelHeader">
                <asp:Image ID="Image2" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />Ajax
                <asp:Label ID="Label2" runat="server" Text="Label">(Show details)</asp:Label>
            </asp:Panel>
            <asp:Panel ID="ContentPanel112" runat="server" CssClass="collapsePanel">
                ASP.NET AJAX Level 1.1.2</asp:Panel>
            <ajaxtoolkit:CollapsiblePanelExtender ID="cpe112" runat="server" TargetControlID="ContentPanel112"
                ExpandControlID="TitlePanel112" CollapseControlID="TitlePanel112" TextLabelID="Label2"
                ExpandedText="(hide details)" CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg"
                ExpandedImage="~/Images/collapse_blue.jpg" SuppressPostBack="true" ImageControlID="Image2"
                Collapsed="True" EnableViewState="true">
            </ajaxtoolkit:CollapsiblePanelExtender>
        </div>
        <div id="Level 1.1.3" class="collapseContainer">
            <asp:Panel ID="TitlePanel113" runat="server" CssClass="collapsePanelHeader">
                <asp:Image ID="Image3" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />Ajax
                <asp:Label ID="Label3" runat="server" Text="Label">(Show details)</asp:Label>
            </asp:Panel>
            <asp:Panel ID="ContentPanel113" runat="server" CssClass="collapsePanel">
                ASP.NET AJAX Level 1.1.3</asp:Panel>
            <ajaxtoolkit:CollapsiblePanelExtender ID="cpe113" runat="server" TargetControlID="ContentPanel113"
                ExpandControlID="TitlePanel113" CollapseControlID="TitlePanel113" TextLabelID="Label3"
                ExpandedText="(hide details)" CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg"
                ExpandedImage="~/Images/collapse_blue.jpg" SuppressPostBack="true" ImageControlID="Image3"
                Collapsed="True" EnableViewState="true">
            </ajaxtoolkit:CollapsiblePanelExtender>
        </div>
    </div>
    </form>
</body>
</html>

Have this code helped?

Best regards,

Zhi-Qiang Ni

Re: Collapsible Panel

09-01-2008, 2:08 AM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

Hi, I'm sorry to keep bothering you; however, I copied and pasted your code into an aspx page. When I previewed the page, 3 panels were visible.

However, whenever I expanded one, the other 2 didn't collapse and vice versa. Is it possible that I'm still doing something wrong?

Re: Collapsible Panel

09-01-2008, 2:15 AM

Contact

26,197 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 4:37 AM
Posts 2,345

Hi,

Please add the css class into the StyleSheet.css file and test again.

.collapseContainer
{
	width: 500px;
	overflow: visible;
}
.collapsePanel
{
	border: medium solid #0000FF;
	width: 450px;
	background-color: white;
	overflow: visible;
	float: none;
}
.collapsePanelHeader
{
	width: 450px;
	height: 20px;
	color: Yellow;
	background-color: #000080;
	font-weight: bold;
	float: none;
	padding: 5px;
	cursor: pointer;
	vertical-align: middle;
}

Wish your good luck!

Please let me know the result.

Best regards,

Zhi-Qiang Ni

Re: Collapsible Panel

09-01-2008, 3:08 PM

Contact

74 point Member
kmj2384
Member since 03-31-2008, 11:59 PM
Posts 211

Hi, I tried everything you said and literally just copy/pasted the code; however, I've still not had any luck.

If there's anything else you can think of that I should try, please let me know; otherwise I really appreciate your help in trying to walk me through this problem.

Re: Collapsible Panel

09-01-2008, 9:57 PM

Contact

26,197 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 4:37 AM
Posts 2,345

Hi,

I’m so sorry that the application could not work at your side. What my suggestion is you build the application yourself – i.e. drag the TitlePanel, ContentPanel & CollapsiblePanelExtender from the tool tabs separately by referring to my sample, and copy my javascript code into the page.

If the aim is still not achieved, maybe there are some error installation or references in your environment. Please reinstall the IDE and the AjaxControlToolkit (checking the version).

Wish your good luck!

Zhi-Qiang Ni

Page 1 of 1 (13 items)

RSS Available