Link to home
Create AccountLog in
Avatar of kmoloney
kmoloneyFlag for United States of America

asked on

MS AJAX Accordion Control always returns to first pane

SUMMARY:  I am developing an asp.net website with a Microsoft AJAX Toolkit Accordion Control (it's configured as a left banner to select content pages).  I have several accordionpanes with <a href> links in the <content> section linking to content pages (which works fine), but after any selection of one of links, the first accordionpane reappears.  I want the pane that I selected to stay "open."

DETAIL

I got most of the code from MS' ASP.NET AJAX Videos.  For example, this accordion has two accordionpanes:  one named "ap_home" and another named "ap_Jobs".

The accordion header is as follows:

            <cc1:Accordion
                ID="AccordionLBanner"
                runat="server"
                fadetransitions=true
                framespersecond="60"
                TransitionDuration="250"
                AutoSize="none"
                HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent">

The accordion panes generally look like this:

                <cc1:AccordionPane ID="ap_Home" runat="server">
                    <Header>
                        <a href="" onclick="return false;">
                            Home
                        </a>
                    </Header>
                   
                    <Content>
                        <a href="/TTI2008/Default.aspx">Home</a><br />
                        <a href="/TTI2008/Mission.aspx">Mission Statement</a><br />
                        <a href="/TTI2008/History.aspx">History</a><br />
                        <a href="/TTI2008/Eligibility.aspx">Eligibility</a><br />
                        <a href="/TTI2008/Accreditation.aspx">Accreditations</a><br />
                        <a href="/TTI2008/testimonial.aspx">Testimonials</a><br />
                    </Content>
                </cc1:AccordionPane>
                   
               
            <cc1:AccordionPane
                ID="ap_Jobs"
                runat="server" ContentCssClass="" HeaderCssClass="">
                    <Header>
                        <a href="" onclick="return false;">
                            Employment
                        </a>
                    </Header>
                   
                    <Content>
                        <a href="/TTI2008/Employment/Emp_JobListings.aspx">Job Listings</a><br />
                        <a href="/TTI2008/Employment/Emp_CommunitySupport.aspx">Community Support</a><br />
                        <a href="/TTI2008/Employment/Emp_Volunteers.aspx">Volunteers</a><br />
                        <a href="/TTI2008/Employment/Emp_StudentsInterns.aspx">Internship</a><br />
                        <a href="/TTI2008/Employment/Emp_Application.aspx">Application</a>
                    </Content>
                   
            </cc1:AccordionPane>

[...and so on]

When I start the website, the ap_Home accordionpane is expanded and active.  Clicking on any of the links in the content sections works fine.  If I click on the ap_Jobs header of the second accordionpane, it expands, and clicking on any of those links loads the page correctly as well.  BUT, on postback, the "ap_Home" accordion pane is reactivated.

I'd prefer to keep the accordionpane in which I'm working active, rather than having to go back and click "Employment" over and over.

Anyway to do this?  Seems like a simple problem, but I think I'm having a problem with syntax.  The "onclick="return false;"" statement seems suspicious to me.

Bonus:  Is there an exhaustive reference of the properties and methods in the AJAX toolkit?

Thanks!
Avatar of kmoloney
kmoloney
Flag of United States of America image

ASKER

Clarification:  This is code found in a master page.
SOLUTION
Avatar of devzero
devzero

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Yep, I knew that was the property, but how would I set that in code in response to clicking on one of the <href> tags?  Visual Basic code-behind would be preferred if I can't do it directly within the asp.net code (not that good at javascript).
Tried setting "SuppressHeaderPostbacks" = true, but that only seems to apply to clicking on the header, not on any of the links beneath it.

Tried using an asp:link control with an onclick handler (instead of the <a href> tag), so in my example, instead of using the following <a href>:

<a href="/TTI2008/Employment/Emp_JobListings.aspx">Job Listings</a><br />

I replaced it with:

                        <asp:LinkButton
                            ID="lnkListings"
                            runat="server"
                            OnClick="lnkListings_Click">
                                Listings-2
                        </asp:LinkButton><br />

and the code-behind on the master page is:

    Sub lnkListings_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Response.Redirect("/TTI2008/Employment/Emp_JobListings.aspx")
        Me.AccordionLBanner.SelectedIndex = 3

    End Sub

But the first accordionpane still shows up as being the active one after what is apparently a postback event.



ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Leaving this question open for something more eloquent.  I think a class could probably handle this better, but not sure how to use it.  I did already create a class with an enum, so I don't have to change the indexes in each page's code if the order should change.

Wide open season for the points for the most efficient VB code to handle this....
Avatar of dinparacha
dinparacha

You don't need   to do any thing the each actual page you can use the following code in load event of master page. Set SelectedIndex=# in query string of each link in your side menu.
   protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
              if (!string.IsNullOrEmpty(Request.QueryString["SelectedIndex"]))
              {
                Int32 AccordionSelectedIndex = Convert.ToInt32(Request.QueryString["SelectedIndex"]);
                accordion.SelectedIndex = AccordionSelectedIndex;
               
            }
  }
}