locked
Stop accordion pane from expanding RRS feed

  • Question

  • User-1128870049 posted

    Hello,

    I'm trying to build an accordion that has some panes that expand and some that don't.  I've not been able to find a way to stop the event from firing.  There is a code example in this forum but it does not work for me.  I posted on that thread but it appears to be very old and I don't expect anyone to answer.  I have pasted a code example below that does not work.

     
     <%@ Page Language="C#" %>
    <%@ Register
        Assembly="AjaxControlToolkit"
        Namespace="AjaxControlToolkit"
        TagPrefix="ajaxToolkit" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Accordion</title>
        <style type="text/css">
            .accordionHeader
            {
                border: 1px solid #2F4F4F;
                color: white;
                background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
                padding: 5px;
                margin-top: 5px;
                cursor: pointer;
            }

            .accordionContent
            {
                background-color: #D3DEEF;
                border: 1px dashed #2F4F4F;
                border-top: none;
                padding: 5px;
                padding-top: 10px;
            }

            .accordionLink
            {
             background-color: #D3DEEF;
                color: white:
            }
         </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
          
            <ajaxToolkit:Accordion ID="MyAccordion" runat="server" HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent" FramesPerSecond="40" TransitionDuration="250"
                AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" SuppressHeaderPostbacks="false">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <asp:HyperLink ID="HyperLink1" runat="server">Panel1</asp:HyperLink></Header>
                        <Content>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <%=DateTime.Now.ToString() %>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>
                            <asp:HyperLink ID="HyperLink2" runat="server">Panel1</asp:HyperLink></Header>
                        <Content>
                            <asp:Button ID="Button1" runat="server" Text="Button" />
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
            <script type="text/javascript" language="javascript">
                function pageLoad(){
                alert('load');
                    for(var i=0 ; i<$find('MyAccordion_AccordionExtender').get_Count(); i++){
                        $removeHandler($find('MyAccordion_AccordionExtender').get_Pane(i).header, "click", $find('MyAccordion_AccordionExtender')._headerClickHandler);
                    }
                    $addHandler($get("<%=HyperLink1.ClientID %>"),"click",$find('MyAccordion_AccordionExtender')._headerClickHandler);
                    $addHandler($get("<%=HyperLink2.ClientID %>"),"click",$find('MyAccordion_AccordionExtender')._headerClickHandler);  
                }
                //If we don't addHandler to Panel header.  
                function pageUnload(){
                    for(var i=0 ; i<$find('MyAccordion_AccordionExtender').get_Count(); i++){
                        $addHandler($find('MyAccordion_AccordionExtender').get_Pane(i).header, "click", $find('MyAccordion_AccordionExtender')._headerClickHandler);
                    }
                    $removeHandler($get("<%=HyperLink1.ClientID %>"),"click",$find('MyAccordion_AccordionExtender')._headerClickHandler);
                    $removeHandler($get("<%=HyperLink2.ClientID %>"),"click",$find('MyAccordion_AccordionExtender')._headerClickHandler);   
                }
            </script>
            </form>
    </body>
    </html>

     

    Thanks,

    Wyatt

     

    Thursday, May 8, 2008 11:50 PM

Answers

  • User583989486 posted

    Hi Wyatt,

    $removeHandler($find('<%=MyAccordion.ClientID%>').get_Pane(0).header,"click", $find('<%=MyAccordion.ClientID%>')._headerClickHandler);
     Error: $find("MainMenuControl1_MyAccordion") has no properties
    Source File: http://localhost:4769/UliviWeb/default.aspx
    Line: 177

    Please make sure that your Accordion's name is MyAccordion. Also we recommend you compare your code with mine.   Please make sure that the js files are downloaded correctly.  

    Also, does anyone know if there is a way to catch the click event of a pane header?  I've tried subscribing to the click event of a LinkButton in the header tags but the event is never fired.

    Please set your SuppressHeaderPostbacks property to false.

    By the way, if your AJAX Control Toolkit's version is lower than V10618. Please upgrade it to the latest version.

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 14, 2008 6:48 AM

All replies

  • User-1128870049 posted

    I am able to get this working on an aspx page but not in my web control where I need it.

    The js line below returns an error saying that MyAccordion_AccordionExtender does not have any properties.

    $removeHandler($find('MyAccordion_AccordionExtender').get_Pane(i).header, "click", $find('MyAccordion_AccordionExtender')._headerClickHandler);

     When I use the line below I get the same error:

    $removeHandler($find('<%=MyAccordion.ClientID%>').get_Pane(0).header,"click", $find('<%=MyAccordion.ClientID%>')._headerClickHandler);
     

    Error: $find("MainMenuControl1_MyAccordion") has no properties
    Source File: http://localhost:4769/UliviWeb/default.aspx
    Line: 177

     
    MainMenuControl1 is the web control that the accordion resides in.  I'm not sure how to resolve this.

    Also, does anyone know if there is a way to catch the click event of a pane header?  I've tried subscribing to the click event of a LinkButton in the header tags but the event is never fired.

    Any and all help is greatly appreciated.

     
    Thanks,

    Wyatt

    Sunday, May 11, 2008 5:41 AM
  • User583989486 posted

    Hi Wyatt,

    $removeHandler($find('<%=MyAccordion.ClientID%>').get_Pane(0).header,"click", $find('<%=MyAccordion.ClientID%>')._headerClickHandler);
     Error: $find("MainMenuControl1_MyAccordion") has no properties
    Source File: http://localhost:4769/UliviWeb/default.aspx
    Line: 177

    Please make sure that your Accordion's name is MyAccordion. Also we recommend you compare your code with mine.   Please make sure that the js files are downloaded correctly.  

    Also, does anyone know if there is a way to catch the click event of a pane header?  I've tried subscribing to the click event of a LinkButton in the header tags but the event is never fired.

    Please set your SuppressHeaderPostbacks property to false.

    By the way, if your AJAX Control Toolkit's version is lower than V10618. Please upgrade it to the latest version.

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 14, 2008 6:48 AM