[How Do I:] Use the ASP.NET AJAX Collapsable Panel Extender?

vedeo is good but what i want is: i have three collapsiblepanels, when mouse is over one of them that shall extend and other two shall collapse. and when mouse is out of all the three then only the collapsiblepanel on which mouse was over last time shall remain expanded.

Thanx a lot

Works fine in IE 7 but when I tested on FireFox and FLock the panel expansion took the right margin of the black panel as its left margin -- more than a little weird looking. (I made no changes to the VB code that I downloaded and was running from VWD EE 2005 as in the tutorial.)

What gives?

this is a quite good explanation of then way, who to install that control. thanks so far. I started using those helpful ajax-control on my local forum site http://www.forum-nuertingen.de  

thanks, raimund

Very helpful video

The collapsible panel flashes when loading, how can i get rid of that?

nice tutorial :) however, when i set Collapsed="False" my panel doesnt show full content.., when i collepse and expand ...then it shows full content..any idea?  

your looking for the accordion control S_Aijaz1

Cool tutorial

Great video!

however, one simple question, after the user has expanded the panel, how can I collapse it from code-behind?

my scenario is this:

I have an update panel where user can see different online test questions, and the collapse panel will display the answer to the question. After the user has clicked "next question" button, the next question is displayed. But I want the panel to be collapsed so that the user won't see the answer until they click on the "show answer" header panel.

Any ideas?

Many thanks in advance.

I got my problem sorted.

No worries then.

Hi, I have problem.

I use

in ok.

But i use <tr>, <td>, <table> not oke.

Can you help me. Thanks.

Great article, should answer all questions about opening and closing.

www.asp.net/.../tutorial-18-vb.aspx

Good Article......

Thanks for the tutorial.  Has anyone adapted the Collapsable Panel to utilize a localized resource table for the ExpandedText and CollapsedText?

S_Aijaz1!

you could use an updatepanel to trigger events.

It's a very good video tutorial...thanks

I try it in IE6. It work fine without any flashing but when I run in IE7, it still have flashing. Is there have anyway to solve it.

Nice video Joe! First I want to say thank you very much for all your videos and help. I've got good experience working with C# in desktop apps, and I've made the jump to Asp.Net not so long ago(it's being harder than what I first thought it would be...) and your videos are so helpful...

I've just tried the CollapsiblePanel and it works Ok but I realised that it takes too long collapsing and expanding the Content Panel.

I've only added to the ContentPanels 3 labels separated by a <br\>, and everytime I collapse or expand the panel I can see the labels disappearing or appearing, it does it too slow.

I've checked you video again and I've seen that it took the panel a while to collapse it too. Is there a way to fix it or made it faster?

Hi,

Thank you very much for all the videos that you have presented, I enjoyed watching them and I learned a lot from them. But I have one question, I hope you can help me on this issue.

I have used the Collapsible Panel Extender on my application, this is to build an application form, until here everything was ok. But than I was asked to put a print button on the form, and that print button must open all the panels and trigger the printing window.

I have used the following function:

function PrintApp()

{

$find("CollapsiblePanelExtender1")._doOpen();

$find("CollapsiblePanelExtender2")._doOpen();

$find("CollapsiblePanelExtender3")._doOpen();

$find("CollapsiblePanelExtender4")._doOpen();

window.print();

}

This function opens all the panels and it triggers printing, but when it prints it prints the window as it was before opening all the panels.

Thank you very much in advance and all the best.

I have found a solution to my question...

All the best,

Hi,

I tired adding the CoppalsePanel in an ASCX control and tried to create and add multiple instances of the ASCX to the same page to a page from the code behind.

but sadly, when i click the control second time, all my Collapse Panel added from the codwe behind just disappears.

Any help?

Nice control.

But ExpandDirection="Horizontal" does not work for me. Nothing comes up when I click the 'ExpandControlID'. Even if I keep Collapsed="true"; TargetControlID is not displayed.

Any clues?

Hi Folks,

if somebody finds a solution to a posted problem, please do not only state that you solved it.

Maybe somebody who reads the comments might be interested in the solution, too!

Cheers!

Marc

Hi, is it possible to use a same Image Control ID for several Collapsible Panel Extenders which are created at runtime? I am having trouble with this. My Image control shows up in the place where it was placed, instead of showing up in the panel.

I found the solution sorry, it was my own mistake!! i was trying to add one image at the bottom of the page hoping that extender would pick it up, but then realized that the image has to be in the panel as well, so Now i create the image control dynamically too, and add it to header panel and assign the id to extender. It works like a breeze! thanks!

Thanks! Jërëjëf!

How CollapsiblePanelExtender run in firefox

Thanks again Joe.

Medcon,

I have the same problem. I have a button in the content panel which when clicked has some server side code to execute and should collapse the content panel. How do I do it on server side?

Any suggestions??

Thank you,

Ajay

Observation:  When collapsible panels are included within a larger panel with a DropShadowExtender, the drop shadow does not change size with the main panel.

BigDropShadowPanel

--Bunch of content

--CollapsibleTitlePanel

--CollapsibleContentPanel

/BigDropShadowPanel

Although this ajax feature appears to work just fine with static content, it it isn't efficient for real applications.

Every dynamically populated dropdown now flashes even though the panel is collapsed and the CSS is set to height 0.

That was good

Hi,

I have a problem with the Viewstate I assume. If I'm using the CollapsiblePanelExtender, the values from my controls are lost when coming back to my page (back button from the explorer).

Here is an example:

<%@ Page Language="C#" AutoEventWireup="true"%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml" >

1. Write anything in both TextBox.

2. Click on the button (link to wikipedia)

3. Click Back

The first TextBox is empty.

The second TextBox is filled.

Collapsible panel:

ExpandControlID="Label1" Enabled="True" TargetControlID="Panel1">

Non collapsible panel:

http://www.wikipedia.org" />

</form>

</body>

</html>

I dont think the control is maintaining the state on page postback.

I am using the panel in a master page for the left menu.

The control does not maintain viewstate

Can we use collapsible panel in gridview?

In my gridview one column has very long text value. So can i use collapsible panel there?

I chekced in gridview and the control is working as expected.

Now problem is how to bind data with the panel. please someone guide me.

Hi, excellent video. I have a problem with de CPE and Update Panels. If i work in design mode it works perfectly but if i try to generate CPE on runtime, it doesnt work de the update panel (it refresh all the page). Can you show me an example of creating dinamically CPEs with updatepanels, so if i have a link inside it can refresh only a part of the site.

Thanks

This was an excellent video and it enabled me to do much of what I wanted to do.

The only question I have is how can make it so when open one panel, all the other panel automatically close?

Did anyone find a C# solution for expanding and collapsing a panel based on a button click event? Thanks in advance.

Okay. Gonna answer my own question in case anyone is interested. This code will collapse my panel:

protected void Button1_Click(object sender, EventArgs e)

{

CollapsiblePanelExtender1.Collapsed = true;

CollapsiblePanelExtender1.ClientState = "true";

}

However, it creates a bit of a "flash" which does not give a clean motion like when the panel opened. Also, creating a button to open all does now work like you would expect. Changing the value to 'false' does not seem to work.

Nice One Joe

I have also done it through javascript quite a while back.

I were try to make toggle area on left side of my screen where i have navigation link like we have toggling in Visual studio

For anyone interested, here is how I finally took care of my page flashing and the inability to get multiple panels to collapse with one button. I could not get C# working and had to use JS.

=================== code ===================================

<script language="javascript" type="text/javascript">

function openCP() {

try { $find("CollapsiblePanelExtender1")._doOpen(); } catch (e) { }

try { $find("CollapsiblePanelExtender2")._doOpen(); } catch (e) { }

try { $find("CollapsiblePanelExtender3")._doOpen(); } catch (e) { }

}

function closeCP() {

try { $find("CollapsiblePanelExtender1")._doClose(); } catch (e) { }

try { $find("CollapsiblePanelExtender2")._doClose(); } catch (e) { }

try { $find("CollapsiblePanelExtender3")._doClose(); } catch (e) { }

}

</script>

<input type="button" id="OpenAllButton" onclick="openCP();" value="Open" />

<input type="button" id="CloseAllButton" onclick="closeCP();" value="Close" />

=================== code ===================================

I am using the CollapsiblePanelExtender, I have speciefied suppressPostBack="true"

This looks much nicer when collapsing the panels, however once I collapse the panels I cannot reopen them. I am using a link button for my collapse and expand control. Any ideas? Here is the code I am using.

Sorry, didn't mean to spam the page, and I don't see an edit here.

Turns out its IE8, it works in compatability mode, Google Chrome, and Firefox. If anyone has a workaround please let me know since its really ugly having a postback everytime the control is clicked.

Hi BuckUF

I have the same scenario what u mentioned i.e am using the collpasable panels in my page and i do have linke button in the page on click of the link button all panels shuld get collpase if any are expanded.

here is the Code:

<cc1:CollapsiblePanelExtender ID="cpeAttributes" runat="server" TargetControlID="pnlAttributes"

AutoCollapse="false" AutoExpand="false" SuppressPostBack="true" ImageControlID="imgAttribute"

CollapseControlID="imgAttribute" ExpandControlID="imgAttribute" CollapsedImage="Images/expand.GIF"

ExpandedImage="Images/collapse.GIF" Collapsed="true" TextLabelID="spnAttributes">

</cc1:CollapsiblePanelExtender>

runat="server">Attributes

</asp:Panel>

codebehind:

protected void lnkbtnSearch_Click(object sender, EventArgs e)

{

cpeBinInfo.Collapsed = true;

cpeBinInfo.ClientState = "true";

cpeETAAttributes.Collapsed = true;

cpeETAStatus.Collapsed = true;

cpeUseInfo.Collapsed = true;

}

I even tried the Javascript function still its not working

function closeCP() {

try { $find("cpeAttributes")._doClose(); } catch (e) { }

}

Help needed....

I have the same scenario what u mentioned i.e am using the collpasable panels in my page and i do have linke button in the page on click of the link button all panels shuld get collpase if any are expanded.

Thanks in advance