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">
<!--
var arImages = new Array();
<asp:Literal ID="litAccordionHeaderImages" runat="server" />
function SwapImage(index)
{
for (i = 0; i < arImages.length; i++)
{
if (i == index)
{
if (document.images['accordionImages_' + i].src.indexOf("Up") > -1)
document.images['accordionImages_' + i].src = '../images/accordionToggleDown.gif';
else
document.images['accordionImages_' + i].src = '../images/accordionToggleUp.gif';
}
else
document.images['accordionImages_' + i].src = '../images/accordionToggleDown.gif';
}
}
//-->
</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 elementson 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 Heightproperty. 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. Thiswill 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';elsedocument.images[
'accordionImages_' + i].src ='images/down.gif';}
elsedocument.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";elseimg.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><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 elementson 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 Heightproperty. 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. Thiswill 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';elsedocument.images[
'accordionImages_' + i].src ='images/down.gif';}
elsedocument.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";elseimg.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><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 elementson 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 Heightproperty. 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. Thiswill 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';elsedocument.images[
'accordionImages_' + i].src ='images/down.gif';}
elsedocument.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";elseimg.ImageUrl =
"images/expand.jpg";imgJs +=
"arImages[" + i.ToString() +"].src = '" + Page.ResolveUrl(img.ImageUrl) +"';\n";}
}
}
===============================================
Hisatx_ewallace
thanks a lot. this example was very useful.
No comments:
Post a Comment