How do I changed the SelectedIndex of an Accordian control at runtime from the client in JavaScript. The SelectedIndex property doesn't appear to be there nor can I find a comparable in the attributes.

Hi Vegivore,

You can just call myAccordion.set_SelectedIndex(i);.  If you're not seeing this property, you should try getting the latest version of the Toolkit.

Thanks,
Ted

I tried this a few different ways - but I always get "Object doesn't support this property or method"

 

I downloaded the latest (i think) - no difference.

 

Microsoft.Web.Atlas.dll - 9/19/06

AtlasControlToolkit.dll - 9/15/06

Microsoft.AtlasControlExtender.dll - 9/19/06

 

Do I have the right builds?

 

 

Here's the relevant code:

 

 

aspx file:

 

<atlasToolkit:Accordion

            ID="accHost"

            ...

 

 

javascript file:

 

var accHost = document.getElementById('accHost');

accHost.set_SelectedIndex(i);

 

 

 

 

 

Hi Vegivore,

Okay - I see your problem now.  You should use var accHost = $object('accHost_AccordionProperties');.  You need to get the "Atlas" behavior instance instead of the DOM element.

Also - I don't think you should have the Microsoft.AtlasControlExtender.dll anymore...  we merged that in with the rest of the Toolkit's AtlasControlToolkit.dll.

Thanks,
Ted

Perfect! Works great.

Thanks Ted

Are old threads still checked?  If so, how would one access the Accordion, client side, when it is embedded in a <UpdatePane>...<Multiview>....<View> <Atlas:Accordion...

 Using the code above I get 'undefined'.  (Obviously I've changed accHost for my own control name)

var myAcc = $object('results_AccordionProperties');

 myAcc is always undefined.

 Angel

 

 

Hi Angel,

When responding to an old thread it bumps it to the top of the list.  The three Microsoft team members had been neglecting the forums to get our last release out the door but we'll always try to answer each post eventually.

I'm guessing that your Accordion's ClientID is something more complicated than just results (because it's probably in a naming container).  You should replace results with whatever its ClientID is to get it working.  If that's not the issue, please keep posting.

Thanks,
Ted

 

Ted,

 I'm having an issue also doing this. I've read your various posts around the forum and this is what my code currently boils down to:

"theAccordion" 
            runat="Server"
            SelectedIndex="0"
            HeaderCssClass="orderHeader"
            ContentCssClass="orderContent"
            AutoSize="None"
            Width="500" 
            FadeTransitions="true"
            TransitionDuration="250"
            FramesPerSecond="40"
            BehaviorID="theAccordion"
            ClientID="theAccordion">
            
                "orderHeader"
                    ContentCssClass="orderContent" 
                    ID="AP1">
                    Choose your template:
                     Step 1 Content 
"server" ID="step1next" Text="Next >">
                
                "orderHeader"
                    ContentCssClass="orderContent"
                    ID="AP2">
                    Select Output Options:
                     Step 2 Content
                    "server" ID="step2prev" Text="< Prev">
                    "server" ID="step2next" Text="Next >">
                    
                
                "orderHeader"
                    ContentCssClass="orderContent">
                    Enter Details:
                     Step 3 Content 
                    "server" ID="step3prev" Text="< Prev">
                    "server" ID="step3next" Text="Next >">
                    
                
                "orderHeader"
                    ContentCssClass="orderContent">
                    Preview Order:
                     Step 4 Content 
                    "server" ID="step4prev" Text="< Prev">
                    "server" ID="step4next" Text="Next >">
                    
                
                "orderHeader"
                    ContentCssClass="orderContent">
                    Submit Order:
                     Step 5 Content 
                    "server" ID="step5prev" Text="< Prev">
                    "server" ID="step5next" Text="Finish">
                    
                
                        
                        
                           
        
         
        "javascript" type="text/javascript">
        function GoNext()
        {
            var accordion = $find('theAccordion_AccordionBehavior');
            accordion.set_SelectedIndex(1);
        }   
    

 

 

 I get a JS error of "accordion has no properties" on the "accordion.set_SelectedIndex(1);" line.

Help!
 

The code-paster botched my code - here it is sans-highlight:

 

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" validateRequest="false" CodeFile="Order.aspx.cs" Inherits="_Default" Title="Order" EnableEventValidation="false" EnableViewState="false"%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="JavaScript" Runat="Server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="SectionName" runat="server">Place/Edit Order</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" Runat="Server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:SqlDataSource runat="server" ConnectionString="<%$ ConnectionStrings: CappSql %>" ID="DSTemplateList" SelectCommand="SELECT TemplateID,TemplateName FROM (SELECT TemplateID,TemplateName FROM Templates UNION SELECT 0 as TemplateID, '' as TemplateName FROM Templates) A ORDER BY TemplateID"></asp:SqlDataSource>
        <table width="85%">
        <tr>
            <td valign="top">
                <asp:Wizard ID="Wizard1" runat="server" Width="100%" Height="100%" Visible="false" SideBarStyle-VerticalAlign="Top">
                    <HeaderStyle VerticalAlign="Top" />
                    <SideBarStyle Wrap="False" />
                    <WizardSteps>
                        <asp:WizardStep ID="WizardStep1" runat="server" Title="Choose a Template" StepType="Start">
                            Choose your template:
                            <asp:DropDownList ID="TemplateList" runat="server" AutoPostBack="True" DataSourceID="DSTemplateList" DataTextField="TemplateName" DataValueField="TemplateID"></asp:DropDownList>
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep2" runat="server" Title="Select Output Options">
                            Output Type:<br />
                            <asp:RadioButtonList ID="OutputType" runat="server" AutoPostBack="True">
                                <asp:ListItem Enabled="False" Value="pdf" Text="PDF"></asp:ListItem>
                                <asp:ListItem Enabled="False" Value="html" Text="HTML"></asp:ListItem>
                            </asp:RadioButtonList>
                            <asp:CheckBox ID="Printing" runat="server" Value="Printing" Text="Printing" Enabled="false" AutoPostBack="True"/>
                            <asp:Panel ID="PrintingDetails" runat="server" Visible="false">
                                Print details here
                            </asp:Panel>
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep3" runat="server" Title="Enter Details">
                            <table border="0" cellpadding="0" cellspacing="0">
                                <asp:Panel ID="DetailsPanel" runat="server" EnableViewState="true"></asp:Panel>
                            </table>
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep4" runat="server" Title="Preview Order">
                            <asp:HyperLink ID="PreviewOrder" runat="server" Target="_blank">Preview Order</asp:HyperLink>
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep5" runat="server" Title="Submit Order" StepType="Complete">
                        </asp:WizardStep>
                    </WizardSteps>
                </asp:Wizard>
                <asp:HiddenField ID="OrderID" runat="server" />
            </td>
            <td valign="top" width="300">
                <asp:Label ID="Label1" runat="server" Text="Current Template" Visible="false" Font-Bold="true"></asp:Label><br />
                <asp:Image ID="pdfImage" runat="server" Visible="false" Width="272" Height="352" BorderWidth="1" style="position:fixed"/>
            </td>
        </tr>
        </table>
        <table><tr><td><asp:Label ID="lblStateInformation" runat="server"></asp:Label></td></tr></table>
        <div style="margin-left:auto; margin-right:auto;">
        <cc1:Accordion
            ID="theAccordion"
            runat="Server"
            SelectedIndex="0"
            HeaderCssClass="orderHeader"
            ContentCssClass="orderContent"
            AutoSize="None"
            Width="500"
            FadeTransitions="true"
            TransitionDuration="250"
            FramesPerSecond="40"
            BehaviorID="theAccordion"
            ClientID="theAccordion">
            <Panes>
                <cc1:AccordionPane
                    HeaderCssClass="orderHeader"
                    ContentCssClass="orderContent"
                    ID="AP1">
                    <Header>Choose your template:</Header>
                    <Content> Step 1 Content <br /><asp:Button runat="server" ID="step1next" Text="Next >"></asp:Button></Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane
                    HeaderCssClass="orderHeader"
                    ContentCssClass="orderContent"
                    ID="AP2">
                    <Header>Select Output Options:</Header>
                    <Content> Step 2 Content
                    <asp:Button runat="server" ID="step2prev" Text="< Prev"></asp:Button>
                    <asp:Button runat="server" ID="step2next" Text="Next >"></asp:Button>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane
                    HeaderCssClass="orderHeader"
                    ContentCssClass="orderContent">
                    <Header>Enter Details:</Header>
                    <Content> Step 3 Content
                    <asp:Button runat="server" ID="step3prev" Text="< Prev"></asp:Button>
                    <asp:Button runat="server" ID="step3next" Text="Next >"></asp:Button>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane
                    HeaderCssClass="orderHeader"
                    ContentCssClass="orderContent">
                    <Header>Preview Order:</Header>
                    <Content> Step 4 Content
                    <asp:Button runat="server" ID="step4prev" Text="< Prev"></asp:Button>
                    <asp:Button runat="server" ID="step4next" Text="Next >"></asp:Button>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane
                    HeaderCssClass="orderHeader"
                    ContentCssClass="orderContent">
                    <Header>Submit Order:</Header>
                    <Content> Step 5 Content
                    <asp:Button runat="server" ID="step5prev" Text="< Prev"></asp:Button>
                    <asp:Button runat="server" ID="step5next" Text="Finish"></asp:Button>
                    </Content>
                </cc1:AccordionPane>
            </Panes>           
            <HeaderTemplate></HeaderTemplate>           
            <ContentTemplate></ContentTemplate>              
        </cc1:Accordion>
        </div>
        <script language="javascript" type="text/javascript">
        function GoNext()
        {
            // Find the behavior instance
            //alert(MyAccordion.SelectedIndex);
            //MyAccordion.set_SelectedIndex(MyAccordion.SelectedIndex + 1);
            var accordion = $find('theAccordion_AccordionBehavior');
            accordion.set_SelectedIndex(1);
            //alert(accordion);
            /*if (!behavior) continue;
              
            // Open or close the panel
            if (open)
            {
                behavior._doOpen();
            }
            else
            {
                behavior._doClose();
            }*/
        }  
    </script>
    </ContentTemplate>
    </asp:UpdatePanel>
  
</asp:Content>

 

 

Hello, did you ever find out of your problem? i have the same problem. I am using the tab controll and when i change tabs i need to open the right accordian pane.

 

var accordion = $find('accEquityModels_AccordionBehavior');

accordion.set_SelectedIndex(2);

I'm hoping to get an answer on this question "how to change the index from javascript"

I've got and accordion with the id "Accordion1" inside a Content Page of a Master Page, and the full client ID of it is:  "Master_MainContent_Accordion1"  (That's according to the ".ClientID" property in code)

that ID is all through the generated HTML as is "Master_ctl04_Accordion1"  (i have no idea what that is looking at, there for sure is only one ajaxToolKit:Accordion declared)

in my javascript, both

var accordion = $find('Master_MainContent_Accordion1_AccordionBehavior');
var accordion = $find('Master_ctl04_Accordion1_AccordionBehavior');

return "null"

any ideas?

 

Found my own answer:  http://blog.benhall.me.uk/2007/01/aspnet-ajax-accordion-control-change.html

Hope that helps others down the road