• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2413
  • Last Modified:

CollapsiblePanel add_expanded behavior problem

My page uses a MasterPage. Inside there is a TabControl with 2 TabPanels ("Parameters" and "Results"). When the page loads initially only the "Parameters" tab is visible. The user enters the search parameters and clicks submit. The "Results" tab is then populated and Enabled. Inside the "Results" tab there are a number of CollapsiblePanels. 2 of these "Map" (initially collapsed) and "Valuation" (initially expanded) are inside UpdatePanels.
The "Map" UpdatePanel contains a single image which is dynamically generated by a GIS server and a HiddenField used to trigger an update from JavaScript. This takes several seconds to generate and uses a fair amount of server resources. For this reason I only want to generate the image if and when the panel is expanded.
The "Valuation" UpdatePanel contains a list of properties each with an "Exclude" CheckBox. Each time one of these is Checked/Unchecked the Panel is updated and displays various statistical information based on the selection.
If the "Map" Panel is expanded a client-side script then checks which properties in the "Valuation" Panel have not been exclued and calls on the GIS system to generate a map image highlighting these properties.

This is all working for the most part EXCEPT when the "Valuation" tab is first enabled the script to add the expanded behavior to the "Map" CollapsiblePanel does not find the object. Only after a property has been excluded and an update has occured does it manage to find it. Thus if no exclusions have been changed the add_expanded behavior is not added and no image is generated.

How do I get to the CollapsiblePanelExtender object when the "Valuation" TabPanel is first Enabled?

...
<asp:UpdatePanel ID="upMap" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
        <asp:Panel runat="server">
            <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" CssClass="ValuationMap" style="border: 3px double #999;" />
                <asp:HiddenField ID="hfRefreshMap" runat="server" />
            </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>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>
...
<script type="text/javascript" language="javascript">
 
function cpeMapInit() {
    try {
        var cpeMap = $find("cpeMapBehavior");
        cpeMap.add_expanded(cpeMapExpanded);
    }
    catch(e) {
    }
}
 
// ---------------------------------------------------------------------
 
function cpeMapExpanded() {
    if (refreshMap == true) {
        refreshMap = false;
        var HighlightList = "";
        for (var x = 0; x <= 14; x++) {
            try {
                if ($get("ctl00_ContentPlaceHolder_tcValuation_tpCMAValuation_cbCmaCP" + x + "Exclude").checked == false) {
                    var CMAID = $get("ctl00_ContentPlaceHolder_tcValuation_tpCMAValuation_hfCP" + x + "CMAID").value;
                    HighlightList += CMAID + ","
                }
            }
            catch (e) {
                break;
            }
        }
        HighlightList += $get("<%=hfSPCMAID.ClientID%>").value;
        $get("<%=hfRefreshMap.ClientID%>").value = "/Mapping/MapPDF.aspx?cmaid=0&schemeno=0&list=" + HighlightList;
        __doPostBack("<%=hfRefreshMap.ClientID%>", "");
    }
}
 
// ---------------------------------------------------------------------
 
var refreshMap = true;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(cpeMapInit);
 
</script>

Open in new window

0
DerekWatling
Asked:
DerekWatling
  • 5
  • 3
1 Solution
 
Bob LearnedCommented:
That is a fairly deep description, and I don't totally get what you are describing.  Where does the Valuation TabPanel get first Enabled?

Bob
0
 
DerekWatlingAuthor Commented:
The "Results" TabPanel - which contains the "Valuation" UpdatePanel - first gets Enabled when the user clicks the "Submit" button on the "Parameters" TabPanel.
0
 
Bob LearnedCommented:
And, where in code does that happen?

Bob
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DerekWatlingAuthor Commented:
At the end of the btnSubmit_Click Sub.

"tcValuation" the the main TabContainer
"tpCMAValuation" is the "Results" TabPanel
"cpeMap" & "cpeComparativeMarketAnalysis" are the 2 CollapsiblePanelExtenders in UpdatePanels.
.aspx.vb
-----------------------------------------------------------------
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
...
[Populate "Results" tab]
...
    tcValuation.ActiveTabIndex = tcValuation.Tabs.IndexOf(tpCMAValuation)
    tpCMAValuation.Enabled = True
    cpeMap.ClientState = True
    cpeComparativeMarketAnalysis.ClientState = False
End Sub

Open in new window

0
 
Bob LearnedCommented:
You could use FindControl with the UpdatePanel:

        Dim extender As CollapsiblePanelExtender = CType(upMap.FindControl("cpeMap"), CollapsiblePanelExtender)

Bob
0
 
DerekWatlingAuthor Commented:
The problem isn't finding the control on the server, it is attaching the "add_expanded" behavior on the client. I have tried as in the original code snippet and also using the server-side code below. Both have the same end result in that the behavior isn't registered until after an update has occured on the "Valuation" Panel.
Not ClientScript.IsClientScriptBlockRegistered("MapExpand") Then
    ClientScript.RegisterStartupScript(Me.GetType(), "MapExpand", "var refreshMap = true; Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(cpeMapInit);", True)
End If

Open in new window

0
 
DerekWatlingAuthor Commented:
Actually where the problem occurs is wth "$find("cpeMapBehavior")" in the JavaScript below. That is why it is in a "try ... catch" block.
function cpeMapInit() {
    try {
        var cpeMap = $find("cpeMapBehavior");
        cpeMap.add_expanded(cpeMapExpanded);
    }
    catch(e) {
    }
}

Open in new window

0
 
DerekWatlingAuthor Commented:
Hack, hack, hack ... and I found something that makes it work ...
I noticed that if I load the map image initialy (the very thing I was trying to avoid)  then the behavior was attached. Tried loading a static image - no luck. Finally got to calling the .aspx page that generates the image with no QueryString and in that case rather than calling on the GIS system put a "Sleep(500)" in and return. For some reason the delay makes it find the object.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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