Expanding accordion pane via code

Is it possible to expand an accordion pane either via codebehind or javascript

alternativle is there a way to expand a pane when a control within it gets focus?

Many thanks

Pete

Hi Pete,

Check out the response athttp://forums.asp.net/thread/1422589.aspx.

Thanks,
Ted

expanding accordion pane upon subcontrol getting focus

i'm setting focus to a control via javascript, but if the control is nested within an accordion pane, the panes dont expand.

is there anyway via javascript to expand the panes, apart from clicking on them with the mouse?

cheers

Pete

Hi Pete,

The easiest way will be to callset_SelectedIndex with the index of the pane you want to expand.

Thanks,
Ted

Expand Accordion pane via hyperlink/event

Hello,

Is there a simple way to do a postback for a specific accordion pane via a hyperlink event ie __doPostBack, i have

id appreciate any pointers or direction

Thanks in advance

yes, but you have change original source code in accordion.

you cant do it by modifiy properties setting

Thats a feasable plan. Is there a reference you could point me to?

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

there

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one be of

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one be

oops, sorry about that . it looks like i submitted the form before i was done typing and it submitted a bunch...

could someone take care of this

i only wanted to say could anyone be of any help?

Example of new Databinding feature of Accordion?

Hi,

I'd like to bind the Accordion to a simple SqlDataSource, which results from a SQL Server View. The DataSource columns are as follows:

CityID
CityName
StationID
StationName

There can be multiple StationIDs for each CityID (a standard many-to-one relationship).

I would like to bind this DataSource to an Accordion control such that the Headers are CityNames, and the Content below each header is the corresponding list of StationNames as hyperlinks.

I'm pretty sure this is very straighforward to do, much as it would be with a GridView or Repeater, but I do not know the syntax for populating the HeaderTemplate and ContentTemplate tags appropriately.

Would anyone be able to post an example which might set me on the right track?

Thanks for any help... and also for all the help you have all already given me on the excellent posts within this forum.

Holf

Well, I found an answer... just treat it exactly like a DataList! This is most cool indeed.

Here is some example code (with CSS borrowed heavily from the Toolkit examples):

<formid="form1"runat="server">

<atlas:ScriptManagerid="ScriptManager"runat="server"/>

<divclass="demoarea">

<asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:TourdioConnectionString %>"

SelectCommand="SELECT [CityID], [CityName], [StaionID], [StationName] FROM [vwStationsByCity] ORDER BY [CityName], [StationName]">

</asp:SqlDataSource>

<br/>

</div>

<atlasToolkit:AccordionID="Accordion2"runat="server"

DataSourceID="SqlDataSource1"SelectedIndex="0"

AutoSize="Limit"FadeTransitions="True"Height="200px"Width="200px"

HeaderCssClass="accordionHeader"ContentCssClass="accordionContent">

<HeaderTemplate>

<%#DataBinder.Eval(Container.DataItem,"CityName")%>

</HeaderTemplate>

<ContentTemplate>

<%#DataBinder.Eval(Container.DataItem,"StationName")%>

</ContentTemplate>

</atlasToolkit:Accordion>

Well, I found an answer... just treat it exactly like a DataList! This is most cool indeed.

Here is some example code (with CSS borrowed heavily from the Toolkit examples):

<formid="form1"runat="server">

<atlas:ScriptManagerid="ScriptManager"runat="server"/>

<divclass="demoarea">

<asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:TourdioConnectionString %>"

SelectCommand="SELECT [CityID], [CityName], [StaionID], [StationName] FROM [vwStationsByCity] ORDER BY [CityName], [StationName]">

</asp:SqlDataSource>

<br/>

</div>

<atlasToolkit:AccordionID="Accordion2"runat="server"

DataSourceID="SqlDataSource1"SelectedIndex="0"

AutoSize="Limit"FadeTransitions="True"Height="200px"Width="200px"

HeaderCssClass="accordionHeader"ContentCssClass="accordionContent">

<HeaderTemplate>

<%#DataBinder.Eval(Container.DataItem,"CityName")%>

</HeaderTemplate>

<ContentTemplate>

<%#DataBinder.Eval(Container.DataItem,"StationName")%>

</ContentTemplate>

</atlasToolkit:Accordion>

events for asp controls nested in an atlas control

How do you go about accessing and declaring events for thosecontrols that are nested within the accordion control (for example) ?

ie.I want to have the following Sub for a txtBox that is nested within anaccordionpane? I understand to get to the control's properties you canuse the .FindControls method on the accordion pane, but how do Ideclare a control's event like below?

Protected SubtxtBox_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)Handles txtBox.TextChanged
...
End Sub

<atlasToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="http://links.10026.com/?link=" onclick="return false;"class="accordionLink">5. References</a></Header>
<Content>
<asp:TextBox ID="txtBox" runat="server" CssClass="txtBox" />
</Content>
</atlasToolkit:AccordionPane>

Thanks

You should be able to wire them up like you normally would through either HTML or in code.

via HTML: Just add TextChanged="txtBox_TextChanged" to your TextBox tag.

programmatically: Use FindControls to get the control and then (C#) objTextBoxRef.TextChanged += EventHandler(txtBox_TextChanged);

How would I do it in VB.Net ?

In HTML I have, for example:

<asp:TextBox ID="txtBox" OnTextChanged="txtBox_TextChanged" runat="server" CssClass="txtBox" />

on the .vb code page I then have:

Public WithEvetns txtBox as TextBox

Sub txtBox_TextChanged(ByValsender As Object, ByVal e As System.EventArgs) HandlestxtBox.TextChanged

xtBox.Text = Format(txtBoxy.Text, "currency")

End Sub

But I get the following error:

Error 1 Method 'Sub txtBoxTextChanged()' does not have thesame signature as delegate 'Delegate Sub EventHandler(sender As Object,e As System.EventArgs)'.

excuse my typos...in my last post.Actually my errors window was just not refreshing.

But still, when I run it, the textchanged event does not fire at all...

...nevermind. i did not have the attribute "AutoPostBack = True" in my tag..I hate it when I'm such a beginner...