Collapsible Panel: How to detect when opened / Spacing issue

I have a page containing a number of CollapsiblePanels. 2 of them are inside UpdatePanels and the rest inside normal Panels.
1) I am looking to detect when one of the CollapsiblePanels in an UpdatePanel is opened so that I can programmatically set the ImageUrl of it's contents based on other selections on the page.
2) After either of the UpdatePanels Updates the CollapsiblePanels they contain both "grow" extra space below them.
DerekWatlingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bane83Commented:
I'm not sure if there's an existing javascript event which you can handle for onExpand/onCollapse, but one thing you can do is add an onclick event handler.

In the onclick event handler, you would check if it's expanded or collapsed.  The control probably has some property such as isCollapsed or a function such as get_Collapsed().

Failing that, you can also do check the offsetHeight on the panel to determine whether or not it's collapsed.

As for item 2, I'm not sure what the problem might be.
0
DerekWatlingAuthor Commented:
I have been searching and the code should be something like the snippet below. However I have tried about 6 different ways from the examples I have found and can't get any of them work. The JavaScript cpeMap object always seems to be "null". Also not sure if "expandComplete.add" or "add_expandComplete" is the correct function. Also this is inside a TabPanel.
<asp:UpdatePanel ID="upMap" runat="server" ChildrenAsTriggers="true">
    <ContentTemplate>
        <asp:Panel ID="pnlTitleMap" runat="server" CssClass="collapsiblePanelTitle">
            <asp:Image ID="imgTitleMap" runat="server" ImageUrl="~/Images/Icon/expand.gif" />
            <asp:Label ID="lblTitleMap" runat="server">Show</asp:Label>
            CMA - Map
        </asp:Panel>
        <asp:Panel ID="pnlContentMap" runat="server" CssClass="collapsiblePanelContent">
            <asp:Image ID="imgMap" runat="server" style="border: 3px double #999; background-image: url(/Images/Icon/Loading.gif); background-position: center center; background-repeat: no-repeat;" Visible="false" />
        </asp:Panel>
        <cc1:CollapsiblePanelExtender ID="cpeMap" runat="server"
            TargetControlID="pnlContentMap" CollapseControlID="pnlTitleMap" ExpandControlID="pnlTitleMap"
            TextLabelID="lblTitleMap" CollapsedText="Show" ExpandedText="Hide"
            ImageControlID="imgTitleMap" CollapsedImage="~/Images/Icon/expand.gif" ExpandedImage="~/Images/Icon/collapse.gif"
            BehaviorID="cpeMapBehavior" Collapsed="True" SuppressPostBack="true">
        </cc1:CollapsiblePanelExtender>
    </ContentTemplate>
</asp:UpdatePanel>
 
<script type="text/javascript" language="javascript">
 
function cpeMapInit() {
    try {
        var cpeMap = $find("cpeMapBehavior");
        cpeMap.expandComplete.add(cpeMapExpanded);
    }
    catch(e) {
        alert(e);
    }
}
 
function cpeMapExpanded() {
    alert("Expanded");
}
 
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(cpeMapInit);
 
</script>

Open in new window

0
DerekWatlingAuthor Commented:
I have got around the spacing issue by nesting a "dummy" Panel inside the UpdatePanel.

There are sill 500 points available to anyone who can help with the "expandComplete" behavior.
0
Bane83Commented:
You were close.
<asp:UpdatePanel ID="upMap" runat="server" ChildrenAsTriggers="true">
	<ContentTemplate>
		<asp:Panel ID="pnlTitleMap" runat="server">
			<asp:Image ID="imgTitleMap" runat="server" />
			<asp:Label ID="lblTitleMap" runat="server">Show</asp:Label>
			CMA - Map
		</asp:Panel>
		<asp:Panel ID="pnlContentMap" runat="server">
			<asp:Image ID="imgMap" runat="server" style="border: 3px double #999; background-image: url(/Images/Icon/Loading.gif); background-position: center center; background-repeat: no-repeat;" Visible="false" />
		</asp:Panel>
		<cc1:CollapsiblePanelExtender ID="cpeMap" runat="server"
			TargetControlID="pnlContentMap" CollapseControlID="pnlTitleMap" ExpandControlID="pnlTitleMap"
			TextLabelID="lblTitleMap" CollapsedText="Show" ExpandedText="Hide"
			ImageControlID="imgTitleMap" Collapsed="True" SuppressPostBack="true">
		</cc1:CollapsiblePanelExtender>
	</ContentTemplate>
</asp:UpdatePanel>
 
<script type="text/javascript" language="javascript">
 
function cpeMapInit() {
	try {
		var cpeMap = $find('<%= cpeMap.ClientID %>');
		cpeMap.add_expanded(cpeMapExpanded);
		cpeMap.add_collapsed(cpeMapCollapsed);
	}
	catch(e) {
		alert(e);
	}
}
 
function cpeMapExpanded() {
	alert("Expanded");
}
 
function cpeMapCollapsed() {
	alert("Collapsed");
}
 
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(cpeMapInit);
 
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DerekWatlingAuthor Commented:
So were you.

Using
<cc1:CollapsiblePanelExtender ... BehaviorID="cpeMapBehavior" ...>
and
        var cpeMap = $find("cpeMapBehavior");
        cpeMap.add_expanded(cpeMapExpanded);
finally works.
Suspect (not) finding the object could be because it is inside a TabPanel.

I am still looking for a AJAX Reference that gives behaviors for the Control Toolkit controls. Does such a thing exist or is one expected to analyse the code to work it out?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.