Dropdown Extender: 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.

Monday, March 26, 2012

Dynamic Accordion Pane Headers

No comments:

Post a Comment

Dropdown Extender

Blog Archive

About Me