locked
Keep panel visible and open if clicked Ajax Drop Down Extender RRS feed

  • Question

  • User-1305858305 posted

    Hello,

    Trying to "drop" dropdownextendered panel if any where clicked on Panel.

    Items populating programatically.

    When setting first item (LinkButton) OnClientClick="HidePanels()" and (DropDownExtende) OnClientPopup="HidePanels()" disappearing theme, working in Chrome but doesnt work in IE "0x800a139e - JavaScript runtime error: Sys.InvalidOperationException: Handler must be a function." with this message.

    Found a solution that removing brackets but after removing doesnt fire event both of browsers. 

    I need to achieve that panel always visible and dropped if user clicked anywhere of panel.

         <script type="text/javascript">
             function HidePanels() {
                 var panel = document.getElementById("Panel");
                    if (panel.style.visibility == 'hidden') {
                        panel.style.visibility = 'visible';
                    }
                    else {
                        panel.style.visibility = 'hidden';
                    }
                }
    
    
    
       </script>   
    
     <script language="javascript" type="text/javascript">
                function DropDownExtender1_pageLoad() { 
                $find('DDE').unhover = doNothing; 
                $find('DDE')._dropWrapperHoverBehavior_onhover(); 
                } 
                function doNothing() {}
    
    Sys.Application.add_load(DropDownExtender1_pageLoad);
    
            </script>
                          <ContentTemplate>                          
                               <div id="divdisplayadresses">                               
                                   <div id="divdisplaydelivery" style="float: left; width: 250px;">
                                   <asp:LinkButton runat="server" ID="LinkButtonPanelDeliveryAdress" OnClientClick="HidePanels()"
                                       Style="display: block; width: 250px; height:150px; padding: 2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" />
                               <asp:Panel runat="server" ID="Panel" >
                                    <ajaxToolkit:DropDownExtender runat="server" ID="DDE" 
                                        TargetControlID="LinkButtonPanelDeliveryAdress" DropDownControlID="Panel" OnClientPopup="HidePanels()"  Enabled="true"/>
                               </asp:Panel>                                                          
                                       </div>
    </ContentTemplate>

    Friday, September 11, 2015 1:27 PM

Answers

  • User61956409 posted

    Hi omerdemir,

    OnClientPopup="HidePanels()"

    Firstly, as you said, you should specify function name to OnClientPopup property.

    OnClientPopup="HidePanels"

    Secondly, I find that the function HidePanels() could be called when we popup the dropdowncontrol.

    <div>
        <div id="result"></div>
        <br />
        <div id="divdisplayadresses">
            <div id="divdisplaydelivery" style="float: left; width: 250px;">
                <asp:LinkButton runat="server" ID="LinkButtonPanelDeliveryAdress" OnClientClick="HidePanels()"
                    Style="display: block; width: 250px; height: 150px; padding: 2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" Text="DeliveryAdress" />
                <asp:Panel runat="server" ID="Panel">
                    <cc1:DropDownExtender ID="DDE" runat="server" TargetControlID="LinkButtonPanelDeliveryAdress" DropDownControlID="panelItems" Enabled="true" OnClientPopup="HidePanels"></cc1:DropDownExtender>
                </asp:Panel>
                <asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
                    <asp:BulletedList ID="BulletedList1" runat="server">
                        <asp:ListItem Text="Item 1" />
                        <asp:ListItem Text="Item 2" />
                        <asp:ListItem Text="Item 3" />
                    </asp:BulletedList>
                </asp:Panel>
            </div>
        </div>
    </div> 
    
    <script>
        function HidePanels() {
            document.getElementById("result").innerText = "HidePanels is called";
    
            var panel = document.getElementById("Panel");
            if (panel.style.visibility == 'hidden') {
                panel.style.visibility = 'visible';
            }
            else {
                panel.style.visibility = 'hidden';
            }
        }
    </script>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 14, 2015 2:30 AM