Maintaining Accordion panel selected state between pages

Hi,

I have a master page that I'm setting up. On the left side is an accordion control. This is going to server as my menu for the website. When the user clicks on a panel header, obviously, the content opens up. I could link to PDF's, HTML, ASPX, etc. When they click on a link to another page in my website, it does a postback. Now in a perfect world, if they were in Accordion "Panel C" when they clicked on that link to another page in my site, it would do the postback, that page would be displayed, and the content under "Panel C" would still be shown. However, I can't get that to work. If I set selectedindex on the header to -1 or 0, it doesn't do what I want it to do. I had EnableViewState set to true at one point and I couldn't get that to work. So, how do I maintain which panel was open between postbacks? Any feedback would be appreciated.

A partial snippet of my code:

<ajaxToolkit:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="false" Width="100%" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" RequireOpenedPane="false">
    <Panes>
       <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
          <Header><a href="" onclick="return false;">About</a></Header>
          <Content>Item 1<br />Item 2<br />Item 3</Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server">
            <Header><a href="" onclick="return false;">Luminaria</a></Header>
            <Content>Item 1<br />Item 2<br />Item 3</Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane7" runat="server">
            <Header><a href="" onclick="return false;">Help</a></Header>
            <Content>
                <p>
                   <asp:HyperLink ID="lnkFAQ" runat="server" NavigateUrl="">Frequently Asked Questions (FAQ)</asp:HyperLink><br />
                   <asp:HyperLink ID="lnkDirections" runat="server" NavigateUrl="">Driving Directions</asp:HyperLink><br />
                   <asp:HyperLink ID="lnkContact" runat="server" NavigateUrl="~/help/contactus.aspx">Contact Us</asp:HyperLink>
                </p>
            </Content>
        </ajaxToolkit:AccordionPane>
     </Panes>
</ajaxToolkit:Accordion>

The problem can be viewed in action, if you like, by going to southportlandrelay.org. Site's still in development, so there's next to nothing out there at the moment, but you can see the problem. Click "Help" and the menu pops up. Click the "Contact Us" item, and you'll be taken to that page, but instead of having the "Help" menu still open, the "About" one is.

What am I missing here? Thanks in advance!

Re: Maintaining Accordion panel selected state across postbacks

According to Accordion Sample: "We keep track of the selected pane so it stays visible across postbacks."

Is it a postback or are you navigating to another page?

-Damien

Re: Maintaining Accordion panel selected state across postbacks

Yes, I'm navigating to another page each time. Sorry about that. I just renamed the subject of this message to reflect the correction.

Re: Maintaining Accordion panel selected state across postbacks

Bubba627
Yes, I'm navigating to another page each time.

In that case it won't work; it's not a postback... You're going to need to set the selected pane on each page, for example passing the index to the query string or storing in Session or something.

-Damien

Re: Maintaining Accordion panel selected state across postbacks

dwhite

Bubba627
Yes, I'm navigating to another page each time.

In that case it won't work; it's not a postback... You're going to need to set the selected pane on each page, for example passing the index to the query string or storing in Session or something.

-Damien

Pardon my ignorance here. So what event do I code for to catch this? I don't see an OnClick associated with anything related to the Accordion. What's the event (or what are the events) that I hook storing this in Session into?

Many thanks for continuing to help me work through this.

Re: Maintaining Accordion panel selected state across postbacks

The property you need to store and set is "SelectedIndex". To set this, you can just do it in the Page_Load, but remember to use if(!Page.IsPostBack) since you only want it to fire the first time. To set the SelectedIndex, you can basically do this anywhere assuming you are using something that posts back (e.g. Page_Load, LinkButton_Click, etc); you don't need a specific event to get the value.

Hope this helps.

-Damien

Re: Maintaining Accordion panel selected state across postbacks

Sorry, but this one seems to be avoiding me. Please bear with me here.

I set up a link button in one of the panels on my master page. It's coded as this:

<asp:LinkButton ID="lbContact" runat="server" OnClick="Foo" PostBackUrl="~/help/contactus.aspx">LinkButton</asp:LinkButton>

I set a breakpoint in my Foo method, and all that does is this:

ViewState["SelectedPanel"] = Accordion1.SelectedIndex;

That method never gets hit. That line never gets executed. I still can't figure out how to get this to work.

You say I can store this in the Page_Load method, but the user doesn't select anything until after the page has already loaded, right? Then they could make multiple selections, showing one panel, then another, then another before they finally click on one of my menu items. I don't get how setting this in page load takes care of it. Don't I actually need a specific event to get the value, with that event being whichever menu item they click, so I know which pane it's in, so I know to save that value?

What am I missing here? Again, thanks for helping me work through this.

Re: Maintaining Accordion panel selected state across postbacks

As far as I know an asp button doesn't execute client site code. It only posts back and execute server site code.
Maybe you try out a "normal" html button with runat=server. The button can execute your javascript function on client site and then execute the server site code.

e.g.:

Client code:

<input type="button" id="lbContact" onClick="Foo();" runat="server" />

Server code:

Protected WithEvents lbContact As HtmlInputButton
Private Sub lbContact_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles lbContact.ServerClick
  'Do what ever you want...
  MyBase.Response.Redirect("~/help/contactus.aspx?SelectedIndex=" & Accordion1.SelectedIndex)
End Sub

Or you can do it all on client site:

function Foo()
{
  location.href = "~/help/contactus.aspx?SelectedIndex=" & Accordion1.SelectedIndex;
}


Hm, or maybe you only forgot the Foo();

** Marcus

Re: Maintaining Accordion panel selected state across postbacks

Hey, thanks for your input on this. I won't be able to get a chance to try it until later this week. I'll post an update and ask any new questions as necessary. Thanks again! Stay tuned!

Re: Maintaining Accordion panel selected state across postbacks

Hi,

So is there any way to do this without using the querystring? I'd like to keep the URL as "clean" as possible, if I can, and keep querystrings out of it. Is it just not possible to use the Accordion control the way I envisioned I could?

Re: Maintaining Accordion panel selected state across postbacks

To pass the index on to another page, you need to maintain the index some way between pages. Querystring is one way to do it, but you can also use Session variables, or even a cookie. See http://msdn.microsoft.com/msdnmag/issues/03/04/ASPNETUserState/ for more info. In your case using the querystring is the best option, but if you don't want to use it then go with Session. Storing an single index isn't going to tax your server, plus you really won't need to worry about Session timeouts or whatnot for something like this.

-Damien

Re: Maintaining Accordion panel selected state across postbacks

hi i have tried all the solutions provided this forums and other forms but nothing woks

because when u are redirecting the page it actually calls the get method not the post method.

so accordain can not maintain its seleted pane.

to do so you have to store the acordain seleted index in session and programaticaaly set the index of accordain during postbacks/