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>