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.
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.
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);
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