[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1613
  • Last Modified:

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.
0
DerekWatling
Asked:
DerekWatling
  • 3
  • 2
1 Solution
 
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
 
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now