CascadingDropDown: accordian

How do I change the Header and Content sections of the Accordian to different colors? The AccordionPan bgcolor changes both to the same color. Do you have to use a stylesheet to perform this action? If so can someone give me and example that would work?

Thank you for your help.

No suggestions ?
To change the Accordian Header and Content Colors, follow these 3 steps...

First you must create or edit your existing styleesheet of your application, the following two items need to be added.

.accordionHeader

{

background-color:blue;

color:white;

}

.accordionContent

{

background-color:#e4e4e4;

}

2nd in the webform between the <head> tags include the link href stylesheet like so.....

<headrunat="server">

<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

</head>

Third edit the AccordionPan tag or tags to accordionHeader and accordionConten settings like so...

<ajaxtoolkit:AccordionPaneID="AccordPane1"HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"runat="server">

Run your app and the setting should be visible now.

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 callmyAccordion.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 usevar 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 yourAccordion'sClientID is something more complicated than justresults (because it's probably in a naming container). You should replace results with whatever itsClientID 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

Wednesday, March 28, 2012

Change contents of an external update panel from within a seperate accordian panel?

Change Color of Header and Content in Accordian

Monday, March 26, 2012

Change Accordian SelectedIndex in the client

CascadingDropDown

Blog Archive

About Me