The Disturbed Buddha

Simple Observations of a Self-proclaimed Novice

Selecting an AJAX AccordionPane by ID

Typically, if we want to programmatically select a particular AccordionPane within an ASP.NET AJAX Accordion control, we set the SelectedIndex property.  This is great if we know the exact order of our AccordionPanes at all times, but this isn’t always so.  Let’s say, for instance, that you have four panes (making their indices 0, 1, 2, and 3, respectively).  If we make the third one (index 2) invisible, now the fourth one has an index of 2.  So let’s create a method to select the AccordionPane by its ID instead.

VB.NET

Public Sub SetPane(ByVal acc As AjaxControlToolkit.Accordion, ByVal PaneID As String) 
    Dim Index As Integer = 0 
    For Each pane As AjaxControlToolkit.AccordionPane In acc.Panes 
        If (pane.Visible = True) Then 
            If (pane.ID = PaneID) Then 
                acc.SelectedIndex = Index 
                Exit For 
            End If 
            Index += 1 
        End If 
    Next 
End Sub

C#

protected void SetPane(AjaxControlToolkit.Accordion acc, string PaneID) { 
    int Index = 0; 
    foreach (AjaxControlToolkit.AccordionPane pane in acc.Panes) { 
        if (pane.Visible == true) { 
            if (pane.ID == PaneID) { 
                acc.SelectedIndex = Index; 
                break; 
            } 
            Index++; 
        } 
    } 
}

It is interesting to note that I attempted to create a client-side equivalent of this method.  However, the ID is not passed down from the server to the client-side behavior, making it impossible to access that propery from the client. 

Advertisements

November 30, 2007 - Posted by | Ajax, ASP.NET, Web Development

10 Comments »

  1. This is possible on the client side, the accordion is created using a $create(), it’s ID is the client ID of the asp.net control plus “_AccordionExtender”.
    So you can get ahold of the control using $find() and then call “set_SelectedIndex(index)”, for example my accordion has an ASP.NET ID of “MyAccordion”:

    onclick=”javascript:$find(‘_AccordionExtender’).set_SelectedIndex(1);”

    John.

    Comment by John | December 18, 2007 | Reply

  2. John:

    Thanks for the feedback. The article was actually in response to a question posed by someone who needed to select the active AccordionPane by ID rather than by index because they were making certain panes invisible based on a user’s authorization. Let me give you an example of why they needed that:

    Let’s say an Accordion has 10 AccordionPanes. Normally, if I want to open the 5th pane (let’s call it “PicturesPane”), I would just set the SelectedIndex of the Accordion to 4 (either via server-side or client-side code). But if the first pane’s Visible attribute is set to “false”, now that pane has an index of 3, not 4. But since I know it has an ID of “PicturesPane”, I can just call SetPane(Accordion1, “PicturesPane”). To summarize: a pane’s index may change depending on certain conditions, but the ID will always be known.

    I’m also not sure that your syntax is valid. I believe because of the behavior wrapper, you actually need to reference it as:

    $get(‘MyAccordion’).AccordionBehavior.set_SelectedIndex(1);

    Comment by disturbedbuddha | December 19, 2007 | Reply

  3. Hi,First of all thanks to you for your valuable efforts and it’s helping a lot.
    pls can u post details code of AJAX Accordion Pane.
    i need it.
    thanks

    Comment by jignesh | March 12, 2008 | Reply

  4. Thank you! This is exactly what I was trying to do.

    Comment by Valerie | October 21, 2008 | Reply

  5. WOW THIS ONE ROCKS

    cheers
    olga lednichenko

    Comment by olga lednichenko | February 12, 2009 | Reply

  6. Thanks for sharing.
    i was also looking for the same.

    Comment by Pragnesh | June 15, 2009 | Reply

  7. Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

    Comment by sandrar | September 10, 2009 | Reply

  8. Very awesome post. Honest.

    Comment by Lillie Lucas | May 27, 2010 | Reply

  9. Thanks man.
    This helped me.

    Comment by Mano | November 18, 2010 | Reply

  10. fantastic issues altogether, you just gained a new reader.
    What might you suggest in regards to your put up that you just made a few
    days in the past? Any positive?

    Comment by Ronny | October 31, 2012 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: