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.
10 Comments »
Leave a reply to Pragnesh Cancel reply
-
Recent
- A Visual Explanation of Different SQL JOINs
- Learning to Go with the ‘Flow…
- Highlighting a GridView Row When Clicking a CheckBox
- Determining a Browser’s Dimensions with Javascript
- Executing Server-side Code from JavaScript
- Wrapping ASP.NET AJAX TabContainer Tabs
- Handling Multiple Asynchronous Postbacks
- Disabling a Trigger Control During Asynchronous PostBack
- Maintain Scroll Position after Asynchronous Postback
- Selecting an AJAX AccordionPane by ID
- Easy SQL “If Record Exists, Update It. If Not, Insert It.”
- View Source Trick for Pages with Partial Rendering
-
Links
-
Archives
- December 2013 (1)
- February 2013 (1)
- January 2008 (3)
- December 2007 (4)
- November 2007 (6)
-
Categories
-
RSS
Entries RSS
Comments RSS
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 |
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 |
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 |
Thank you! This is exactly what I was trying to do.
Comment by Valerie | October 21, 2008 |
WOW THIS ONE ROCKS
cheers
olga lednichenko
Comment by olga lednichenko | February 12, 2009 |
Thanks for sharing.
i was also looking for the same.
Comment by Pragnesh | June 15, 2009 |
Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.
Comment by sandrar | September 10, 2009 |
Very awesome post. Honest.
Comment by Lillie Lucas | May 27, 2010 |
Thanks man.
This helped me.
Comment by Mano | November 18, 2010 |
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 |