CollapsiblePanelExtender collapses automatically

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » CollapsiblePanelExtender collapses automatically

Shortcuts

Previous Next

CollapsiblePanelExtender collapses automatically

Last post 03-05-2009 3:24 AM by Lance Zhang - MSFT. 2 replies.

Sort Posts:

CollapsiblePanelExtender collapses automatically

02-28-2009, 1:36 PM

Contact

point Member
claudiuso
Member since 02-28-2009, 6:29 PM
Posts 1

Could someone tell me what's wrong with the following scenario:

<asp:Panel ID="pnlOrders" runat="server" Style="margin-left: 10px; margin-right: 20px;
    background-image: url('Assets/img/loading.gif'); background-repeat: no-repeat; display: none;">
</asp:Panel>
<ajax:CollapsiblePanelEx ID="cpe" runat="Server" TargetControlID="pnlOrders" ExpandControlID="imgCollapsible"
    CollapseControlID="imgCollapsible" CollapsedSize="0" Collapsed="true" AutoCollapse="False"
    AutoExpand="False" ScrollContents="false" ImageControlID="imgCollapsible" ExpandedImage="~/Assets/img/minus.png"
    CollapsedImage="~/Assets/img/plus.png" ExpandDirection="Vertical" OnExpand="onExpand">
</ajax:CollapsiblePanelEx>

function onExpand(sender, eventArgs)
{
var expander = $get(sender.get_ExpandControlID().replace(/_imgCollapsible/g,'_pnlOrders'));

expander.style.height= '24px';
expander.style.display = 'block';
}

The panel expands for a split second, shows the background image and the collapse again automatically.

Thanks

Re: CollapsiblePanelExtender collapses automatically

02-28-2009, 3:21 PM

Contact

Answer

10,558 point Star
Danny117
Member since 12-16-2008, 2:30 PM
Royal Oak Michigan USA
Posts 1,837

There is no onexpand property that I know of on the collapsiblepanel extender.

You can attach a handler with javascript calling

add_expanded : function(handler) {
        /// <summary>
        /// Add an event handler for the expanded event
        /// </summary>
        /// <param name="handler" type="Function" mayBeNull="false">
        /// Event handler
        /// </param>
        /// <returns />
        this.get_events().addHandler('expanded', handler);
    },

Good Luck

Re: CollapsiblePanelExtender collapses automatically

03-05-2009, 3:24 AM

Contact

Answer

33,090 point All-Star
Lance Zhang - MSFT
Member since 05-25-2008, 10:44 PM
Posts 2,361

Just as Danny said, we can attach the onExpand function by $find("BehaviorID").add_collapsed(onExpand);, please try the following demo:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:CollapsiblePanelExtender ID="collapseSearch3" runat="server" ExpandControlID="panLmdHeader"
            CollapseControlID="panLmdHeader" TargetControlID="panLmd" BehaviorID="collapseSearch3">
        </ajaxToolkit:CollapsiblePanelExtender>
        <asp:Panel ID="panLmdHeader" runat="server" CssClass="collapseHeader" BackColor="AntiqueWhite"
            Height="27px" Width="245px">
            <asp:Label ID="Label5" runat="server" Text="Lookup ID" Font-Underline="True"></asp:Label>
        </asp:Panel>
        <asp:Panel ID="panLmd" runat="server" Height="416px" Width="247px" BackColor="AppWorkspace">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </asp:Panel>
    </div>

    <script type="text/javascript">

        function pageLoad() {
            $find("collapseSearch3").add_collapsed(onExpand);
        }

        function onExpand(sender, eventArgs) {
            var expander = $get(sender.get_ExpandControlID().replace(/_imgCollapsible/g, '_pnlOrders'));
            expander.style.height = '24px';
            expander.style.display = 'block';
        }
    </script>

    </form>
</body>
</html>

Thanks.

Lance Zhang

Page 1 of 1 (3 items)

RSS Available