How do I have multiple close buttons with a CollapsiblePanelExtender?

Question

I have an asp.net ajax CollapsiblePanelExtender control on my page. The way this control is designed, you can specify one control to open the panel and another control to close it:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

If ExpandControlID and CollapseControlID are identical, as they are in this example, then the control toggles the panel open and closed.

But what I would like is another control (within panelStuff) that allows the user to close this panel. Ideally, I would like to specify:

CollapseControlID="butToggle,butClose"

Any ideas how to do this?

score 3 · Accepted Answer · answered Apr 13 '09 at 18:39

3

One way to achieve this:

Assign a BehaviorID to the CollapsiblePanelExtender:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
  BehaviorID="cpeForBehavior"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

Create javascript function to execute desired behavior:

function closeCpe() {
    $find("cpeForBehavior")._doClose();
}

Execute function in event handler:

<input type="button" id="MyOtherButton" onclick="closeCpe();" />

answered Apr 13 '09 at 18:39

HectorMac

6,073
4
24
24

Where did you find _doClose() ? Is there documentation somewhere for these sort of commands? what if I wanted to expand and not collapse? I'm guessing doOpen() would work but what if I didn't know. – adinas Jul 19 '09 at 11:15
adinas: I have to admit, I don't know where you would go to find documentation. These may be undocumented underlying support functions for the extender. That said, you can also use _doOpen() and _doToggle(). – HectorMac Jul 20 '09 at 12:27

score 1 · Answer 2 · answered Nov 22 '11 at 16:49

Same as answer above but I was looking for a toggle. _doToggle() would not work, so just for reference:

 function closeCpe() {
            var cpe = $find("cpeForBehavior");

            if (cpe.get_Collapsed()) {
                cpe._doOpen();
            }
            else {
                cpe._doClose();
            }
        }

How do I have multiple close buttons with a CollapsiblePanelExtender?

2 Answers2