CollapsiblePanelExtender, is it possible to open/close programatically using javascript ?

I wrote the article about it

have a look

http://www.c-sharpcorner.com/UploadFile/MIB426/IntroductionAJAXCollapsiblePanel01032007132314PM/IntroductionAJAXCollapsiblePanel.aspx?ArticleID=09bf9c67-248c-45c9-a865-49534d61782b

I read your article and downloaded the example. Thanks.
But my question was,, for example, in your sample app, is it possible to expand with the smooth animation the exployee detail panel upon clicking on an employee id in the employee list panel ?

I guess this needs to be done on client side. I use a master page and even if I get the client id of the collapsiblepanelextender but $find('extenderid') returns null in a javascript.

I'd appreciate your help.

Thanks.

Can anybody help me out on this ?
Bascially what I'm trying to do is to be able to expand/collapse a panel using collapsiblepanelextender and javascript.

With Atlas, I was able to do all that through a behavior using js function "_doOpen()" and "_doClose()".

Is this possible using RC1 ?

I'd appreciate your help.

Thanks.

Im in the same boat. so /Bump a roo

Hi,

First you should add a BehaviorID="MyCP" to your CollapsiblePanelExtender. Then when you write var b = $find("MyCP"); in JavaScript, you'll get a reference to the specific behavior you want (this is what's defined in CollapsiblePanel.js). Once you have that, you can call b._doOpen(); to expand it.

Thanks,
Ted

Hi Ted,

I recently got my functionaly to work with _doOpen(); One thing that i have noticed is the _doOpen() is not animating the open.

Basicly what im trying to do is make an Accorion effect that can have more then 1 panel open at a time.

1.) check how many open panels.

2.) calculate Panelsize=screen.height / # of open panels.

3.) set open panels to new panel size

4.) _doOpen() on all currently open panels

This idea works and all panelsizing gets set accordingly however the opening of a new panel does not animate.

------------------------------------

function cpCollapsed(sender, eventArgs){
if (eventArgs.get_propertyName() == "Collapsed"){
var Panel1 = $find('ctl00_CollapsiblePanelExtenderPanel1');
var Panel2 = $find('ctl00_CollapsiblePanelExtenderPanel2');
var Panel3 = $find('ctl00_CollapsiblePanelExtenderPanel3');

var ScreenHeight = screen.height;
var PanelHeight = 0;
var CollapsedState = 0;

if (Panel1.get_Collapsed() != true){CollapsedState ++;}
if (Panel2.get_Collapsed() != true){CollapsedState ++;}
if (Panel3.get_Collapsed() != true){CollapsedState ++;}

if (CollapsedState != 0){PanelHeight = (ScreenHeight/CollapsedState)/2;}

if (Panel1.get_Collapsed() != true){
Panel1.set_ExpandedSize(PanelHeight);
Panel1._doOpen();}
if (Panel2.get_Collapsed() != true){
Panel2.set_ExpandedSize(PanelHeight);
Panel2._doOpen();}
if (Panel3.get_Collapsed() != true){
Panel3.set_ExpandedSize(PanelHeight);
Panel3._doOpen();}
}
}

Hello Ted,

Thank you so much. That works great !!!.

I have another question with accordion. It's about the same kind though. I used to be able to get to accordion behavior object in js file after getting the client id of the extender and appending extra string "_AccordionExtender" at the end. Now I installed ASP.NET AJAX 1.0 today and this is broken. my $find(clientId + "_AccordionExtender") now returns null.

In the same context, does accordion extender have something like BehaviorID like CollapsiblePanelExtender ? What changed ?

I'd appreciate your help.

Thanks

I realize this thread is rather old although it has provided me with some great info.

I still have coding problem after reading it... does anyone know how to iterate through a page's CollapsiblePanelExtenders without knowing their ID's or BehaviorID's? I'd like to write a function that would go through the controls on a page, grab all the names of the CollapsiblePanelExtenders then use them in the function instead of having to hardcode them into the function.

I DON'T want to do it this way...

var ids[ 'cpe1' , 'cpe2' , 'cpe3' ]

I'd like to do it this way... (if possible)

var ids[ document.getElementbyTagName("ajax") ]

Any Ideas?

Thanks in advance.