Dynamic HTML ToolTip that loads OnHover/OnMouseOver

right now i have a web app that has a repeater (rather large) with a literal for one of the columns. this literal is a number based on the amount of entries and on load has javascript added to it that displays row specific information built from a database when you hover over it. the problem is that every time the page loads, every tooltip is loaded. i want to only go to the DB and get this info when they hover over that literal. so onmouseover of this literal would trigger an event that builds the tooltip and displays it as before.

i've searched this forum (which by the way isn't efficient) along with some good old Google hunting with no luck. can anyone point me in the right direction? oh yeah, i also would prefer not to use some random 3rd party tool. =)

This is fairly easy. Follow this tutorial:http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx except that in the 'OnComplete' javascript function that fires when the web service returns, have it fill whatever container you're currently using to display the tooltip (mostly this ends up being the title attribute of one element or another).

I'll check it out and see how it goes. Thanks for the reply =)

Dynamic CollapsiblePanels

I was wondering if anyone has ever dynamically added CollapsiblePanels to a web form based on data from a database? Do I need to create a separate instance for each panel area I need or can I do it with one CollapsiblePanel control? Basically what I am looking to do is create something like the following:

TITLE1
>FIELD1
>FIELD2

TITLE2
>FIELD3
>FIELD4
>FIELD5

All data is being pulled from a database so, the fields are added to a Panel based on the title they are associated with. My workflow is currently to:

1) Query the database to get the information
2) Loop through the records to add controls to a new content panel
3) When all of the fields have been added to the contents panel, create a new CollapsiblePanel control and add it to the form
4) Loop until there aren't any more groups

This seems to kind of work but I continue to get an error stating that I have two or more controls with the same ID. I believe I have traced this to the adding of the multiple CollapsiblePanels. I am generating a random number to assign to the CollapsiblePanel every time one is generated but, the error still happens.

Any ideas what could be going on here?

I was in the same situation and came up with the following code. I hope it helps. I use Patterns and Practices (v3.0) so use your method of choice to obtain the data. I make use of a place holder to dump the controls so make sure you put one on your form and call it plcHolderForPanels for this example. Good luck :)

using System;
using System.Data;
using System.Configuration;
using System.Text;
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;
using Microsoft.Practices.EnterpriseLibrary.Data;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string sql = "SELECT * FROM [topics]";

// Get the topics
IDataReader reader = DatabaseFactory.CreateDatabase().ExecuteReader(CommandType.Text, sql);

// Display the topics
while (reader.Read())
{
GeneratePanels(reader["id"].ToString(), reader["name"].ToString());
}
}
}

private void GeneratePanels(string topicId, string topicName)
{
// 1. Create hte panel for the title
Panel pnlTitle = new Panel();
pnlTitle.ID = @."pnlTitle" + topicId;
pnlTitle.CssClass = "collapsePanelHeader";

Image imgTitle = new Image();
imgTitle.ID = @."imgTitle" + topicId;
imgTitle.ImageUrl = @."images/expand.jpg";

Label lblTitle = new Label();
lblTitle.ID = @."lblTitle" + topicId;
lblTitle.Text = " -- Click here to expand...";

pnlTitle.Controls.Add(imgTitle);
pnlTitle.Controls.Add(new LiteralControl(topicName));
pnlTitle.Controls.Add(lblTitle);

// 2. Create the content panel
Panel pnlContent = new Panel();
pnlContent.ID = @."pnlContent" + topicId;
pnlContent.CssClass = @."collapsePanel";

pnlContent.Controls.Add(new LiteralControl("This is some text..."));

// 3. Now create the collapsible panel control
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
cpe.ID = @."cp" + topicId;
cpe.TargetControlID = pnlContent.ID;
cpe.ExpandControlID = pnlTitle.ID;
cpe.CollapseControlID = pnlTitle.ID;
cpe.Collapsed = true;
cpe.TextLabelID = lblTitle.ID;
cpe.ImageControlID = imgTitle.ID;
cpe.CollapsedImage = "images/expand.jpg";
cpe.ExpandedImage = "images/collapse.jpg";
cpe.SuppressPostBack = true;

plcHolderForPanels.Controls.Add(cpe);
plcHolderForPanels.Controls.Add(pnlTitle);
plcHolderForPanels.Controls.Add(pnlContent);
plcHolderForPanels.Controls.Add(new LiteralControl("<BR><BR>"));
}
}

Dynamic CollapsiblePanel

I am surely a novice, but was wondering if it is possible to dynamically build a page of collapsible panels based on the values in a SQL table. The code size would be greatly reduced if it can be done.Just another forum that noone uses!

I'll be honest, this is a very vague question. And it seems as though you are fishing for free code. We aren't here to code projects for you. If you are looking for pointers, I'll gladly provide this.

The approach I would take is to use either a SqlDataSource or ObjectDataSource to retrieve the data. I like working with objects, so it tends to take more code up front to get the data from SQL and turn it into objects in my object model. But once done, I then use the ObjectDataSource to get the data ready for binding.

Then you can use any number of databound controls. One example might be the Repeater control. This is a very free form control that will let you provide any HTML per object (or row) returned from the datasource. In the ItemTemplate, you just define the CollapsiblePanelExtender as you would in any databound control.

If you get stuck, please post here with the code that is blocking you and I'll do what I can to help.

Got it working. The problem was with the page sub-class.

dynamic cascaded drop down

Hi..

well in my web page based on a parameter user selects i need to create contents dynamically

for eg if A is passed than page will have only 1 drop down but if B is passed it might have 7 8 drop downs in it..

this is one part of the problem..once i am able to create them i need to address there selection index change even which will call again some fucntion

which will reload all othr drop dwon whch were created dynamically

so its kind of generating cascaded drop down dynamically and the parent control id could be more than one

Can some one help me out

in case any one is here wondering what happened to the problem

the solution is same as

http://forums.asp.net/t/1090354.aspx

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">
<!--
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 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>

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

<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";

}

}

}

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

Hisatx_ewallace

thanks a lot. this example was very useful.

DropDownList to DropDownList

I want to take the selected value of DropDownListA and based on that value do a query to the database and populate DropDownListB. For example, DropDownListA contains Entity values. If the user selects entity101 then I call stored procedure where I pass in the entity value, run a select statement and get a list of properties associated with the entity name. I want to take that list and populate DropDownListB. Easy enough to do with ASP.NET using the AutoPostBack. Would be real nice to do this with Atlas. Is it possible? If so, how?Atlas control toolkit has cascading dropdowns-please download the the controltoolkit and look at the sample application code for cascading dropdowns- that should help you,

dropdownlist in updatepanel1 to update updatepanel2

I have 2 ddl in an updatepanel1 and when one is selected, panel refreshes to load ddl #2 based on ddl1 choice. Works great, love it. Now can ddl2 change cause updatepanel2 to refresh?doh! nevermind... set update to conditional and call updatepanel.update from codebehind.