Showing posts with label accordion. Show all posts

Wednesday, March 28, 2012

Dynamic Data in Accordion Control

Hi guys,

I'm trying to populate dynamic data into the AJAX Accordion control. What I want is values taken from my db and posted into the Accordion panels (perhaps 20 to 30 panels per page). I can manage the paging issue (page 1, page 2, page 3 etc.) but how do I take a value from the database, place it in the header, then pick another column from the same row and place it into content, and then move onto the next row?

Any ideas?

Hello,

I made some study,

I could add dynamically it's header and content through the code.

Anyway, it works for me. if contents are simple I think O.K.

Following test code was in the Page_Load event. (VB, but code is very simple for C# to read)

Dim acdAs AjaxControlToolkit.Accordion =Me.FindControl("Accordion2")Dim pAs New AjaxControlToolkit.AccordionPaneDim lAs New Label l.Text ="content test"Dim l2As New Label l2.Text ="header test"Dim inpAs New HtmlInputButton("image")With inp .ID ="myImage_2" .Attributes.Add("src","../images/4-0.gif")End With p.HeaderContainer.Controls.Add(l2) p.HeaderContainer.Controls.Add(inp) p.ContentContainer.Controls.Add(l) acd.Panes.Add(p)

Thanks mate.

It makes sense, but I'm ending up with an error using the exact same code that you provided Tongue Tied At runtime:

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description:An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details:System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 24: Line 25:Line 26: acd.Panes.Add(p)

Any idea what seems to be going wrong here?

Okies i think I've worked this out. For some reason My.FindControl wasn't working for me so I changed the code to this instead:

Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim pAs New AjaxControlToolkit.AccordionPaneDim hAs New Label h.Text ="header text"Dim cAs New Label c.Text ="container text" p.HeaderContainer.Controls.Add(h) p.ContentContainer.Controls.Add(c) Accordion1.Panes.Add(p) Application("prodtype") = ProductTypeList.SelectedItem.TextEnd Sub

A reference directly to the Accordion control id helped. Many thanks for the help.

Cheers!

Monday, March 26, 2012

dynamic accordionpanes

I'm trying to create dynamic accordion panes for use in an accordion as a menu. I have the controls inside the accordionpanes working, but I'm trying to format the header for the panels and I'm running into a problem. The code is as follows:

dim mypane as accordionpane

'add controls

dim myLabel as label

mylabel.text = "some label"

mypane.controls.add(mylabel)

'add header

mypane.header = new headerTemplate("someheaderlabel","someurl")

myaccorion .pane.add(mypane)

the code for headerTemplate is:

private class headerTemplate

implements itemplate

dim headerlabel as string

dim headerurl as string

public sub new(byval label as string,byval url as string)

headerlabel = label

headerurl = url

end sub

public sub instantiatein (ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn

dim myheader as new literalcontrol

myheader.text = headerlabel

dim myurl as new linkbutton

myurl.text = "(Show All")

myurl.postbackurl = headerurl

container.controls.add(myheader)

container.controls.add(myurl)

end sub

The 'new' sub is run on the 'mypane.header = new headerTemplate("someheaderlabel","someurl") ' line, but the instantiatein is never fired. What am I doing wrong?

OK - I found an easier way to do it - just add the controls to the accordianpane.headercontrols.

Now when I test it (I have 2 hard coded panes and one that I create programatically), the two hard-coded panes expand and collapse fine, but the one i created programatically doesn't collapse (but does make the hard coded ones collapse when i click on it). Has anybody else run across this before? If so, how did you fix it?

I'm having the same problem. Programatically created accordion panes do not collapse. Can anyone please help?

Hi,

Here is a sample made as your description, it works fine. Please try it:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { //TextBox tb = new TextBox(); //MyAccordion.HeaderSelectedCssClass = ""; //AccordionPane1.HeaderContainer.Controls.Add(tb); AccordionPane ap = new AccordionPane(); MyAccordion.Panes.Add(ap); LinkButton lb = new LinkButton(); lb.Text = "hello"; ap.HeaderContainer.Controls.Add(lb); TextBox tb2 = new TextBox(); ap.ContentContainer.Controls.Add(tb2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header><a href="http://links.10026.com/?link=">1. Accordion</a></Header> <Content> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> <asp:Button ID="Button1" runat="server" Text="Button" /> The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks. </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header><a href="http://links.10026.com/?link=">2. AutoSize</a></Header> <Content> <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p> <ul> <li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.</li> <li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.</li> <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.</li> </ul> <asp:Button ID="Button2" runat="server" Text="Button" /> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header><a href="http://links.10026.com/?link=">3. Control or Extender</a></Header> <Content> The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. The extender expects its input in a very specific hierarchy of container elements (like divs), so the Accordion and AccordionPane web controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide it appropriate input. </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div> <script type="text/javascript"> function pageLoad(sender, args) { var behavior = $find('MyAccordion_AccordionExtender'); behavior.add_selectedIndexChanged(onSelectedIndexChanged); } function onSelectedIndexChanged(sender, args) { } </script> </form></body></html>

Hope this helps.

I have solved my problem by changing mypane.controls.add() to mypane.contentcontainer.add().

Dynamic Accordion works perfect in Firefox, but not in Internet Explorer

Hi people,

first all, i apologize my language but i not write english very well..

Well,I have an accordion with panels generated in dynamic form, in whicheach headercontainer it contains a set of labels and eachcontaincontainer it has only textbox hidden at load time.

The objective is to load gridview within containercontent according tothe appropriate identifier. When the user makes click onheadercontainer of the panel, calling to an event that is the one incharge to refresh the content of contentcontainer, but the event neverhappens.

Notice that I have created only event to handler, assigned eachlinkbutton to refresh his to contentcontainer with data bound to a gridview.
I have tried of different forms, but no successful one, beingimportant to stand out that if I put linkbutton in contentcontainer ofthe panel, the event works; but if it return to headercontent, theevent lets go off

Notethat the problem only arises in Internet Explorer, not in Firefox. Thislast one works perfect. I've been loosing my hair for two days and I donot have left more ideas Sad .. please help me..

anyone, any idea?

Hi anouk,

Could you try this with the Accordion from the latest Toolkit release? We just updated with a major overhaul of the Accordion that fixed a lot of known issues. If that doesn't help, perhaps you could post a simple sample here that I can take a look at to get a better idea of what's going wrong.

Thanks,
Ted

Thanks!! it works!

The 10301 release it works perfectand now I can put the contents in real time in the accordion panel, bythe server event linkbutton.click

Thank you again

Dynamic Accordion with Paging

hi there; using asp.net 2.0 (vb) i've just created a page that, in the page load event, retreives a number of records from the database.

as each record is read into a dataset, a new accordon panel is created. the panel header displays the fldName and the panel content displays the fldContent from the table.

this all works great. the issue i'm having is that it currently displays all the records (approx 200) and i only want 10 records displayed at a time.

my question is, is there somehow a way to implement paging? i found the following article:

http://rolf-cerff.de/blogs/dotnet/archive/2007/03/08/ajax-control-toolkit-paging-with-databound-accordion-control.aspx

but i'm not familiar enough with C# to understand.

also, any idea if paging for the accordion is in the works?

thanks all.

You can use a paged data source...

Basically, create a datatable from your recordset, and then...
Dim pds As New PagedDataSource
pds.DataSource = (whatever then dataset is called).Tables(0).DefaultView
pds.AllowPaging = True
pds.PageSize = 10
pds.CurrentPageIndex = curpage (passed into the databind sub, optional value that = 0 at first)
CurrentPage (see below) = pds.CurrentPageIndex + 1

What I do is to create a viewstate item called CurrentPage to keep track of the pages...
Public Property CurrentPage() As Integer
Get
Dim o As Object = Me.ViewState.Item("_CurrentPage")
If o Is Nothing Then
Return 0
Else
Return o
End If
End Get
Set(ByVal value As Integer)
Me.ViewState.Item("_CurrentPage") = value
End Set
End Property

You can then have linkbuttons to guide through pages... Just rebind using your sub and pass in CurrentPage as the curpage to advance or CurrentPage - 1 to go back.

Dynamic Accordion Pane Headers

Is there a property that I could use to change an image in the Pane Header so that an image can change based on if it is open or not, like a plus or minus image? I am also hoping to make the header text bold when the pane is open.Does anyone know if this can be done?

I know this is kind of late, but I ran into the same issue. Here is what I did...it's a hack-job but it works. I'm using it on an intranet project, but so far it works in IE 6, firefox 2, and Safari 2.0.4 Hope it helps someone.

/******************** ASPX ********************/
<asp:PlaceHolder ID="phJobList" runat="server">
<tr>
<td colspan="4" align="left" valign="top">
<ajax:Accordion
ID="ajxAccJobList"
runat="server"
SkinID="DefaultAccordion"
SelectedIndex="0"
Width="500">
<HeaderTemplate>
<table width="100%" cellpadding="2" cellspacing="0" border="0" class="TableStandard">
<tr>
<th align="left" valign="middle">
<%# Eval("JobTitle") %>
</th>
<th align="right" valign="middle" style="padding-top:0px"><asp:Image runat="server" /></th>
</tr>
</table>
</HeaderTemplate>
<ContentTemplate>
<table width="100%" cellpadding="2" cellspacing="0" border="0" class="TableStandard">
<tr>
<td align="left" valign="middle"><%# Eval("BeginDate")%></td>
</tr>
</table>
</ContentTemplate>
</ajax:Accordion>
</td>
</tr>
<script language="javascript">

</script>
</asp:PlaceHolder>

/******************** .cs ********************/

Image img;
string imgJs = "";
for (int i = 0; i < ajxAccJobList.Panes.Count; i++)
{
img = (Image)ajxAccJobList.Panes[i].HeaderContainer.Controls[1]; //<-- NOTE: My image happens to be at position 1.
img.Attributes.Add("onclick", "SwapImage(" + i.ToString() + ")");
img.Attributes.Add("name", "accordionImages_" + i.ToString());
imgJs += "arImages[" + i.ToString() + "] = new Image();\n";
if (i == ajxAccJobList.SelectedIndex)
img.ImageUrl = "~/images/accordionToggleUp.gif";
else
img.ImageUrl = "~/images/accordionToggleDown.gif";

imgJs += "arImages[" + i.ToString() + "].src = '" + Page.ResolveUrl(img.ImageUrl) + "';\n";
}
litAccordionHeaderImages.Text = imgJs;

I should note that the above only works when the image is clicked on. I'm working on any other region.

okay. instead of the image onclick event, use this:

ajxAccJobList.Panes[i].HeaderContainer.Attributes.Add("onclick", "SwapImage(" + i.ToString() + ")");

not this:

img.Attributes.Add("onclick", "SwapImage(" + i.ToString() + ")");

i put the .cs stuff in the page load, but how do I add accordian panes if I use this?
I figured out the answer on my own, my next question would be, why are my panes all staying open?
Can you be a bit more specific? Are they all open on page load or do they just not close after they are expanded?

Dearsatx_ewallace

I suggest changes in the prev code

==============asp.net============

PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

htmlxmlns="http://www.w3.org/1999/xhtml">

headrunat="server"><title>Untitled Page</title>

head>

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><divclass="demoarea"><divclass="demoheading">Accordion Demonstration</div>

<ajaxToolkit:AccordionID="MyAccordion"runat="server"SelectedIndex="0"HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"FadeTransitions="false"FramesPerSecond="40"TransitionDuration="250"AutoSize="None"RequireOpenedPane="false"SuppressHeaderPostbacks="true"><Panes><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"BorderStyle="Solid"BorderColor="AliceBlue"BackColor="ActiveCaption"BorderWidth="1"><Header>

<ahref=""class="accordionLink">1. Accordion</a>

<asp:HyperLinkID="HyperLink2"NavigateUrl="Default.aspx"runat="server">??????</asp:HyperLink></Header><Content>

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

It is like having several

<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl=""Text="CollapsiblePanels"/>

where only one can be expanded at a time. The Accordion is implemented as a web control that contains

AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

We keep track of the selected pane so it stays visible across postbacks.

</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane2"runat="server"><Header><ahref=""class="accordionLink">2. AutoSize</a></Header><Content><p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p><ul><li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other elements

on your page to move up and down with it.

</li><li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height

property. This will cause the content to scroll if it is too large to be displayed.

</li><li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This

will cause the content to be expanded or shrunk if it isn't the right size.

</li></ul>

</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane3"runat="server"><Header><ahref=""class="accordionLink">3. Control or Extender</a></Header><Content>

The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.

The extender expects its input in a very specific hierarchy of container elements (like divs), so

the Accordion and AccordionPane web controls are used to generate the expected input for the extender.

The extender can also be used on its own if you provide it appropriate input.

</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane4"runat="server"><Header><ahref=""class="accordionLink">4. What is ASP.NET AJAX?</a></Header><Content><asp:ImageID="Image1"runat="server"ImageUrl="~/images/AJAX.gif"AlternateText="ASP.NET AJAX"ImageAlign="right"/>

sd hfjksdf

sdklfj las;d

sdfjkal;sdkf

sdlfkkl;asd

</Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>

Fade Transitions:

<inputid="fade"type="checkbox"onclick="toggleFade();"value="false"/><br/>

AutoSize:

<selectid="autosize"onchange="changeAutoSize();"><optionselected="selected">None</option><option>Limit</option><option>Fill</option></select>

<scriptlanguage="javascript"type="text/javascript">function SwapImage(index)

{

for (i = 0; i < 5; i++)

{

if (i == index)

{

if (document.images['accordionImages_' + i].src.indexOf("Up") > -1)

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';else

document.images[

'accordionImages_' + i].src ='images/down.gif';

}

else

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';

}

function toggleFade() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');if (behavior) {

behavior.set_FadeTransitions(!behavior.get_FadeTransitions());

}

function changeAutoSize() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');var ctrl = $get('autosize');if (behavior) {var size ='None';switch (ctrl.selectedIndex) {case 0 :

behavior.get_element().style.height =

'auto';

size = AjaxControlToolkit.AutoSize.None;

break;case 1 :

behavior.get_element().style.height =

'400px';

size = AjaxControlToolkit.AutoSize.Limit;

break;case 2 :

behavior.get_element().style.height =

'600px';

size = AjaxControlToolkit.AutoSize.Fill;

break;

}

behavior.set_AutoSize(size);

}

if (document.focus) {

document.focus();

}

</script></div></div></form>

body>

html>

==================================

=============================cs================

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclassDefault2 : System.Web.UI.Page

{

public System.Web.UI.WebControls.Image img;protectedvoid Page_Load(object sender,EventArgs e)

{

for (int i = 0; i < MyAccordion.Panes.Count; i++)

{

img =

newImage();

MyAccordion.Panes[i].HeaderContainer.Controls.Add(img);

// System.Web.UI.WebControls.Image img = (Image)MyAccordion.Panes[i].HeaderContainer.Controls[1]; //<-- NOTE: My image happens to be at position 1.

img.Attributes.Add(

"onclick","SwapImage(" + i.ToString() +")");

img.Attributes.Add(

"name","accordionImages_" + i.ToString());string imgJs ="arImages[" + i.ToString() +"] = new Image();\n";if (i == MyAccordion.SelectedIndex)

img.ImageUrl =

"images/down.gif";else

img.ImageUrl =

"images/expand.jpg";

imgJs +=

"arImages[" + i.ToString() +"].src = '" + Page.ResolveUrl(img.ImageUrl) +"';\n";

}

===============================================

Dearsatx_ewallace

I suggest changes in the prev code

==============asp.net============

PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

htmlxmlns="http://www.w3.org/1999/xhtml">

headrunat="server"><title>Untitled Page</title>

head>

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><divclass="demoarea"><divclass="demoheading">Accordion Demonstration</div>

<ahref=""class="accordionLink">1. Accordion</a>

<asp:HyperLinkID="HyperLink2"NavigateUrl="Default.aspx"runat="server">??????</asp:HyperLink></Header><Content>

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

It is like having several

<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl=""Text="CollapsiblePanels"/>

where only one can be expanded at a time. The Accordion is implemented as a web control that contains

AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

We keep track of the selected pane so it stays visible across postbacks.

on your page to move up and down with it.

</li><li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height

property. This will cause the content to scroll if it is too large to be displayed.

</li><li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This

will cause the content to be expanded or shrunk if it isn't the right size.

</li></ul>

</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane3"runat="server"><Header><ahref=""class="accordionLink">3. Control or Extender</a></Header><Content>

The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.

The extender expects its input in a very specific hierarchy of container elements (like divs), so

the Accordion and AccordionPane web controls are used to generate the expected input for the extender.

The extender can also be used on its own if you provide it appropriate input.

sd hfjksdf

sdklfj las;d

sdfjkal;sdkf

sdlfkkl;asd

</Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>

Fade Transitions:

<inputid="fade"type="checkbox"onclick="toggleFade();"value="false"/><br/>

AutoSize:

<selectid="autosize"onchange="changeAutoSize();"><optionselected="selected">None</option><option>Limit</option><option>Fill</option></select>

<scriptlanguage="javascript"type="text/javascript">function SwapImage(index)

{

for (i = 0; i < 5; i++)

{

if (i == index)

{

if (document.images['accordionImages_' + i].src.indexOf("Up") > -1)

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';else

document.images[

'accordionImages_' + i].src ='images/down.gif';

}

else

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';

}

function toggleFade() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');if (behavior) {

behavior.set_FadeTransitions(!behavior.get_FadeTransitions());

}

function changeAutoSize() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');var ctrl = $get('autosize');if (behavior) {var size ='None';switch (ctrl.selectedIndex) {case 0 :

behavior.get_element().style.height =

'auto';

size = AjaxControlToolkit.AutoSize.None;

break;case 1 :

behavior.get_element().style.height =

'400px';

size = AjaxControlToolkit.AutoSize.Limit;

break;case 2 :

behavior.get_element().style.height =

'600px';

size = AjaxControlToolkit.AutoSize.Fill;

break;

}

behavior.set_AutoSize(size);

}

if (document.focus) {

document.focus();

}

</script></div></div></form>

body>

html>

==================================

=============================cs================

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclassDefault2 : System.Web.UI.Page

{

public System.Web.UI.WebControls.Image img;protectedvoid Page_Load(object sender,EventArgs e)

{

for (int i = 0; i < MyAccordion.Panes.Count; i++)

{

img =

newImage();

MyAccordion.Panes[i].HeaderContainer.Controls.Add(img);

// System.Web.UI.WebControls.Image img = (Image)MyAccordion.Panes[i].HeaderContainer.Controls[1]; //<-- NOTE: My image happens to be at position 1.

img.Attributes.Add(

"onclick","SwapImage(" + i.ToString() +")");

img.Attributes.Add(

"name","accordionImages_" + i.ToString());string imgJs ="arImages[" + i.ToString() +"] = new Image();\n";if (i == MyAccordion.SelectedIndex)

img.ImageUrl =

"images/down.gif";else

img.ImageUrl =

"images/expand.jpg";

imgJs +=

"arImages[" + i.ToString() +"].src = '" + Page.ResolveUrl(img.ImageUrl) +"';\n";

}

===============================================

Dearsatx_ewallace

I suggest changes in the prev code

==============asp.net============

PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

htmlxmlns="http://www.w3.org/1999/xhtml">

headrunat="server"><title>Untitled Page</title>

head>

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><divclass="demoarea"><divclass="demoheading">Accordion Demonstration</div>

<ahref=""class="accordionLink">1. Accordion</a>

<asp:HyperLinkID="HyperLink2"NavigateUrl="Default.aspx"runat="server">??????</asp:HyperLink></Header><Content>

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

It is like having several

<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl=""Text="CollapsiblePanels"/>

where only one can be expanded at a time. The Accordion is implemented as a web control that contains

AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

We keep track of the selected pane so it stays visible across postbacks.

on your page to move up and down with it.

</li><li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height

property. This will cause the content to scroll if it is too large to be displayed.

</li><li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This

will cause the content to be expanded or shrunk if it isn't the right size.

</li></ul>

</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane3"runat="server"><Header><ahref=""class="accordionLink">3. Control or Extender</a></Header><Content>

The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.

The extender expects its input in a very specific hierarchy of container elements (like divs), so

the Accordion and AccordionPane web controls are used to generate the expected input for the extender.

The extender can also be used on its own if you provide it appropriate input.

sd hfjksdf

sdklfj las;d

sdfjkal;sdkf

sdlfkkl;asd

</Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>

Fade Transitions:

<inputid="fade"type="checkbox"onclick="toggleFade();"value="false"/><br/>

AutoSize:

<selectid="autosize"onchange="changeAutoSize();"><optionselected="selected">None</option><option>Limit</option><option>Fill</option></select>

<scriptlanguage="javascript"type="text/javascript">function SwapImage(index)

{

for (i = 0; i < 5; i++)

{

if (i == index)

{

if (document.images['accordionImages_' + i].src.indexOf("Up") > -1)

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';else

document.images[

'accordionImages_' + i].src ='images/down.gif';

}

else

document.images[

'accordionImages_' + i].src ='images/collapse_blue.jpg';

}

function toggleFade() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');if (behavior) {

behavior.set_FadeTransitions(!behavior.get_FadeTransitions());

}

function changeAutoSize() {var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');var ctrl = $get('autosize');if (behavior) {var size ='None';switch (ctrl.selectedIndex) {case 0 :

behavior.get_element().style.height =

'auto';

size = AjaxControlToolkit.AutoSize.None;

break;case 1 :

behavior.get_element().style.height =

'400px';

size = AjaxControlToolkit.AutoSize.Limit;

break;case 2 :

behavior.get_element().style.height =

'600px';

size = AjaxControlToolkit.AutoSize.Fill;

break;

}

behavior.set_AutoSize(size);

}

if (document.focus) {

document.focus();

}

</script></div></div></form>

body>

html>

==================================

=============================cs================

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclassDefault2 : System.Web.UI.Page

{

public System.Web.UI.WebControls.Image img;protectedvoid Page_Load(object sender,EventArgs e)

{

for (int i = 0; i < MyAccordion.Panes.Count; i++)

{

img =

newImage();

MyAccordion.Panes[i].HeaderContainer.Controls.Add(img);

// System.Web.UI.WebControls.Image img = (Image)MyAccordion.Panes[i].HeaderContainer.Controls[1]; //<-- NOTE: My image happens to be at position 1.

img.Attributes.Add(

"onclick","SwapImage(" + i.ToString() +")");

img.Attributes.Add(

"name","accordionImages_" + i.ToString());string imgJs ="arImages[" + i.ToString() +"] = new Image();\n";if (i == MyAccordion.SelectedIndex)

img.ImageUrl =

"images/down.gif";else

img.ImageUrl =

"images/expand.jpg";

imgJs +=

"arImages[" + i.ToString() +"].src = '" + Page.ResolveUrl(img.ImageUrl) +"';\n";

}

===============================================

Hisatx_ewallace

thanks a lot. this example was very useful.

Dynamic Accordion Content

Is there a way to dynamically add to the Content of an AccordionPane?Has anyone been able to do this?

mdenn:
Is there a way to dynamically add to the Content of an AccordionPane?

A short sample:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
 <ajax:ScriptManager runat="server" ID="sm1" EnablePartialRendering="true"></ajax:ScriptManager>
 <act:Accordion runat="server" ID="Accordion1">
 <Panes>
 <act:AccordionPane runat="Server" ID="AccordionPane1" >
 <Header>
 <b>Pane one</b>
 </Header>
 <Content>
 <asp:Panel runat="Server" ID="panel1">
 Just some text here. <br />
 </asp:Panel>
 </Content>
 </act:AccordionPane>
 <act:AccordionPane runat="Server" ID="AccordionPane2">
 <Header>
 <b>Pane two</b>
 </Header>
 <Content>
 <asp:Label ID="Label1" runat="server" Text="First label"></asp:Label><br /><br />
 <asp:Label ID="Label2" runat="server" Text="Last label"></asp:Label>
 </Content>
 </act:AccordionPane>
 </Panes>
 </act:Accordion>
 </form>
</body>
</html>

PartialClass _Default
Inherits System.Web.UI.Page

Protected Sub Page_Init(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Init
If Not Page.IsPostBackThen
Dim tmpLabelAs New Label
tmpLabel.Text ="Programmatically added label."Dim tmppanelAs Panel
tmppanel =Me.Accordion1.Panes(0).FindControl("Panel1")
If Not tmppanelIs Nothing Then tmppanel.Controls.Add(tmpLabel)End If
End If
End Sub

End Class

For some reason, adding the control directly to AccordionPane1.Controls caused the whole Accordion to crash and burn (both panes would stay open, can't manipulate them).
Do I need to do it on the Page_Init event? I tried it on the onLoad for the Accordion, and that didn't seem to work.

mdenn:
Do I need to do it on the Page_Init event? I tried it on the onLoad for the Accordion, and that didn't seem to work.

Works fine in Page_Load for me. What kind of errors or unexpected behavior are you getting?

I found out my problem... I had copied the code from our old accordion control that called another page to get the data to fill in the Pane, and I forgot to take that out.

Wednesday, March 28, 2012

Dynamic Data in Accordion Control

Server Error in '/' Application.

Object reference not set to an instance of an object.

Monday, March 26, 2012

dynamic accordionpanes

Dynamic Accordion works perfect in Firefox, but not in Internet Explorer

Dynamic Accordion with Paging

Dynamic Accordion Pane Headers

Dynamic Accordion Content

Dropdown Extender

Blog Archive

About Me