Close the DropDownExtender's Panel manually

Abbas · July 26th, 2007, 03:04 AM

Hi,

I have a nested DIV structure where both have an onclick event, hence I am cancelling the event from bubbling up to the outer DIV, but this has caused the Panel to remain opened when I click on another dropdown (in another item within my repeater) or anywhere else on the page, and I am wondering if anyone knows how to close the panel manually using the AjaxControlToolkit.DropDownBehavior?

Here is some source code:

Code:

 <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
        <%# Eval("Text") %>
       <div id="test<%=counter++ %>" onclick="cancelEvent(event)";>
     <asp:Label ID="TextLabel" runat="server" Text="Select your favorite exotic ice-cream flavor"
            Style="display: block; width: 300px; padding:2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" />
        <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;">
            <asp:LinkButton CommandArgument="www.google.ca" runat="server" ID="Option1" Text="Mocha Blast" CssClass="ContextMenuItem" OnClick="OnSelect"/>
            <asp:LinkButton CommandArgument="www.google.ca" runat="server" ID="Option2" Text="Java Cyclone" CssClass="ContextMenuItem" OnClick="OnSelect" />
            <asp:LinkButton CommandArgument="http://www.google.ca" runat="server" ID="Option3" Text="Dry Fruit" CssClass="ContextMenuItem" OnClick="OnSelect" />   
            <asp:HyperLink ID="HyperLink1" runat="server" Text="HyperLink" NavigateUrl="http://www.google.ca" CssClass="ContextMenuItem" />
        </asp:Panel>
        <ajaxToolkit:DropDownExtender runat="server" ID="DDE"
            TargetControlID="TextLabel"
            DropDownControlID="DropPanel" /></div>
        <br />
        <asp:UpdatePanel id="Update" runat="server">
            <ContentTemplate>
                <asp:Label id="lblSelection" runat="server" Style="padding: 5px;" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
</ItemTemplate>
</Repeater>

The JavaScript:

Code:

function cancelEvent(e) {
            //var test = AjaxControlToolkit.DropDownBehavior.get_isOpen();

             //src.onclick();
             alert('cancel');
             if(window.event) {
                  alert('1');
                if (!e) e = window.event;
                e.cancelBubble = true;
            }
            else if ( e.stopPropagation) {
               //  alert('2');
                e.stopPropagation();
            }
            else {
                 alert('3');
                return false;
              }
}