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 and ajax

Hi there

I have the following problem. I have a multiview within an updatepanel. When i activate a view within the multiview i want to do something. So i created OnActivate="vProperties_Activate" on the view. Now when i click a certain button i do this

mvContent.SetActiveView(vProperties);
upContent.Update();

Setting the activeview and updating the updatepanel. The problem is that vProperties_Activate is never reached. I got a same sort of problem when i create a button in the code behind and the event is never reached. Can someone help me with this?

Thnx in advance!

Is the button inside the UpdatePanel?

If not, is the button set up as a Trigger within the Update Panel?

I can't repro this. I set up the following markup and all events fire as expected:

C#

protected void Button1_Click(object sender, EventArgs e) {if (mv1.ActiveViewIndex == 0) { mv1.ActiveViewIndex = 1;//return; }else if (mv1.ActiveViewIndex == 1) { mv1.ActiveViewIndex = 2;//return; }else if (mv1.ActiveViewIndex == 2) { mv1.ActiveViewIndex = 0;//return; } UPD1.Update(); }protected void mv1_ActiveViewChanged(object sender, EventArgs e) {//Response.Write("Active View Index Chagned - " + mv1.ActiveViewIndex.ToString()); TextBox1.Text="Active View Index Changed - " + mv1.ActiveViewIndex.ToString(); }protected void view1_Activate(object sender, EventArgs e) { TextBox1.Text ="View 1 Activated!"; }

HTML:

 
<asp:UpdatePanel ID="UPD1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:MultiView runat="server" id="mv1" ActiveViewIndex="0" OnActiveViewChanged="mv1_ActiveViewChanged"> <asp:View runat="server" ID="view1" OnActivate="view1_Activate" > a</asp:View> <asp:View runat="server" ID="view2"> b</asp:View> <asp:View runat="server" ID="view3"> c</asp:View> </asp:MultiView> <asp:TextBox ID="TextBox1" runat="server" Height="152px" TextMode="MultiLine" Width="408px"></asp:TextBox> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
  

Ok thats not exactly what i have. I have created the multiview in the ASPX page with the different views. Then in the code behind i create the dynamic part of tblPropertiesForm. When i do it OnAtivate is doesnt work and when i do it OnInit it wors fine. Seems to be a viewstate issue. Problems is that i dont want to create all the views when the page loads. I also create the button in the code behind.

The MultiView is within an update panel

</p><p><asp:View ID="vProperties" runat="server" OnInit="vProperties_Init">
<asp:Table runat="server" ID="tblPropertiesForm">
<asp:TableRow>
<asp:TableCell ColumnSpan="2"><asp:Label ID="lblProperties" Text = "Eigenschappen" runat="server" CssClass="ContentHeader" Font-Bold="true"></asp:Label></asp:TableCell>
</asp:TableRow>

<asp:TableRow>
<asp:TableCell Font-Bold="true">Omschrijving</asp:TableCell>
<asp:TableCell Font-Bold="true">Invoerveld</asp:TableCell>
</asp:TableRow>

</asp:Table>
</asp:View>

From the documentation, if you create controls and add them to the collection at any other time than Load or Init, they will behave unexpectedly.

LSU.Net:

From the documentation, if you create controls and add them to the collection at any other time than Load or Init, they will behave unexpectedly.

This means that when i want to create a (reasonable big) website with ajax i have to create ALL the views on the init of the views. Definitly not good for performance. Is there no way around that so i can still create the controls on the activate?

Thnx for your quick responses.

No. You see, if you create the controls at any other time, their corresponding events cannot fire because the page doesn't know about them.
Well now i think of it. The view itself is created in the ASPX page. I can create that in the init and set the onactivate. Then i should be able to create the other contols on the activate. I thought i tried that but maybe not... Could this work or is still something preventing the fire of the onactivate?
Ok the onactivate works now, but now a button thats created in the on_init and placed on the page within the onactivate doesnt fire his click event :(

Errors in code view from AJAX scriptmanager control

When I am working on my page in code view, errors populate the error window ("ScriptManager" is not a known element... and a lot like that relating to any ajax control). But in design view everything works fine. It also is not using any of the ajax controls in the tag suggestion dropdown window. Any suggestions on how to fix this?

Hi

Did you include System.Web.Extension dll in your bin folder

Did you add

<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
<pages>
<controls>
<add tagPrefix="ajax" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>

in your web.config .

Try that out..

Hope that works it out

Bye