Tha Ajax Control Toolkit includes 40 Web Forms controls and extenders.

Click on the
links below to view documentation and tutorials for each of the controls.

• Accordion Control
o Reference
o Creating a Simple Accordion
• AlwaysVisible Control
o Reference
o Displaying a Fixed Panel
• Animation Control
o Reference
o Creating a Yellow Fade Effect
• AsyncFileUpload Control
o Reference
• AutoComplete Control
o Reference
o Displaying a Simple Auto-Complete TextBox
• Calendar Control
o Reference
o Displaying a Simple Popup Calendar
• CascadingDropdown Control
o Reference
• CollapsiblePanel Control
o Reference
• ColorPicker Control
• ComboBox Control
• ConfirmButton Control
o Reference
• DragPanel Control
o Reference
• DropDown Control
• DropShadow Control
• DynamicPopulate Control
o Reference
• FilteredTextBox Control
• HoverMenu Control
 • HTMLEditor Control
• ListSearch Control
• MaskedEdit Control
• ModalPopup Control
• MultiHandleSlider Control
• MutuallyExclusiveCheckBox Control
• NoBot Control
• NumericUpDown Control
• PagingBulletedList Control
• PasswordStrength Control
• Popup Control
• Rating Control
• ReorderList Control
• Resizable Control
• RoundedCorners Control
• Seadragon Control
• Slider Control
• SlideShow Control
• TabContainer and TabPanel Controls
• TextBoxWatermark Control
• ToggleButton Control
• UpdatePanelAnimation Control
• ValidatorCallout Control

Ajax Control Toolkit Accordion Control

The Accordion control lets you define multiple panes and display them one at
a time. It is like having severalCollapsiblePanel controls where only one can
be expanded at a time. The Accordion control contains one or more
AccordionPane controls. Each AccordionPane control has a template for its
header and its content. The selected pane is automatically persisted across
postbacks.

The Accordion control supports the following AutoSize modes to

accommodate a variety of page layouts.
 • None - The Accordion control grows and shrinks without restriction.
This can cause other elements on the page to move up and down in
order to accommodate the Accordion control.
• Limit - The Accordion control never grows larger than the value
specified by its Height property. This causes the content to scroll if
the content is too long to be displayed in the allotted space.
• Fill - The Accordion control is a fixed size as specified in
its Height property. This causes the content to be expanded or shrunk
if the content does not fit exactly into the allotted space.

Like most of the extenders in the AJAX Control Toolkit, the Accordion control
is written using an extender. The extender requires input in a specific
hierarchy of container elements (like div elements). Therefore, the Accordion
and AccordionPane controls are used to generate the expected input for the
extender. The extender can also be used on its own if you provide
appropriate input.

The Accordion control can also be data-bound. To bind the control, specify a
data source using the DataSource orDataSourceID properties, and then
set the data items in
the HeaderTemplate and ContentTemplate properties. You must call
the DataBind method to bind the control to the data.

Creating a Simple Accordion

In this tutorial, you learn how to add an Ajax Control Toolkit Accordion to a
page and show three panes of content. There are four steps: (1) Add a
ToolkitScriptManager (2) Add an Accordion (3) Add AccordionPanes (4) Add
Accordion styles.

To learn how to install the Ajax Control Toolkit, see the Ajax Control
Toolkit page.

Add a ToolkitScriptManager
Before you can use any of the Ajax Control Toolkit controls in a page, you
first need to add a ToolkitScriptManager to the page. You can drag the
ToolkitScriptManager from the Visual Studio Toolbox window onto the page.
The ToolkitScriptManager is located in the Ajax Control Toolkit tab under
the Toolbox.
view plaincopy to clipboardprint?

1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

 2. </asp:ToolkitScriptManager>

Add an Accordion
Next, in source view, you need to add an Accordion control. You can drag the
Accordion control from the Toolbox or type the tag yourself:
view plaincopy to clipboardprint?

1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

2. </asp:ToolkitScriptManager>
3.
4. <asp:Accordion
5. ID="Accordion1"
6. runat="server">
7. </asp:Accordion>

Add AccordionPanes
Next, in source view, add one or more AccordionPane controls. The Accordion
displays a single AccordionPane at a time. Notice that each AccordionPane
contains both a header and content tag.

view plaincopy to clipboardprint?

1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

2. </asp:ToolkitScriptManager>
3.
4. <asp:Accordion
5. ID="Accordion1"
6. runat="server">
7. <Panes>
8. <asp:AccordionPane runat="server">
9. <Header>Pane 1</Header>
10. <Content>
11. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
12. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
13. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
14. </Content>
15. </asp:AccordionPane>
 16. <asp:AccordionPane ID="AccordionPane1" runat="server">
17. <Header>Pane 2</Header>
18. <Content>
19. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
20. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
21. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
22. </Content>
23. </asp:AccordionPane>
24. <asp:AccordionPane ID="AccordionPane2" runat="server">
25. <Header>Pane 3</Header>
26. <Content>
27. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
28. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
29. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
30. </Content>
31. </asp:AccordionPane>
32. </Panes>
33. </asp:Accordion>

Add Accordion Styles

An Accordion without any Cascading Style Sheet styles applied to it does not
look very nice. The final step is to add one or more styles to the Accordion
control:
view plaincopy to clipboardprint?

1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]" I

nherits="[Link]" %>
2. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagpre
fix="asp" %>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link]
/TR/xhtml1/DTD/[Link]">
4. <html xmlns="[Link]
5. <head runat="server">
6. <title>Simple Accordion</title>
7. <style type="text/css">
8. .accordion {
9. width: 400px;
10. }
11.
12. .accordionHeader {
13. border: 1px solid #2F4F4F;
14. color: white;
15. background-color: #2E4d7B;
16. font-family: Arial, Sans-Serif;
17. font-size: 12px;
18. font-weight: bold;
19. padding: 5px;
20. margin-top: 5px;
21. cursor: pointer;
22. }
23.
24. .accordionHeaderSelected {
25. border: 1px solid #2F4F4F;
26. color: white;
27. background-color: #5078B3;
28. font-family: Arial, Sans-Serif;
29. font-size: 12px;
30. font-weight: bold;
31. padding: 5px;
32. margin-top: 5px;
33. cursor: pointer;
34. }
35.
36. .accordionContent {
37. background-color: #D3DEEF;
38. border: 1px dashed #2F4F4F;
39. border-top: none;
40. padding: 5px;
41. padding-top: 10px;
42. }
43. </style>
44.
45. </head>
46. <body>
47. <form id="form1" runat="server">
48. <div>
49.
50. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
51. </asp:ToolkitScriptManager>
52.
53. <asp:Accordion
54. ID="Accordion1"
55. CssClass="accordion"
56. HeaderCssClass="accordionHeader"
57. HeaderSelectedCssClass="accordionHeaderSelected"
58. ContentCssClass="accordionContent"
59. runat="server">
60. <Panes>
61. <asp:AccordionPane runat="server">
62. <Header>Pane 1</Header>
63. <Content>
64. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
65. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
66. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
 67. </Content>
68. </asp:AccordionPane>
69. <asp:AccordionPane ID="AccordionPane1" runat="server">
70. <Header>Pane 2</Header>
71. <Content>
72. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
73. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
74. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
75. </Content>
76. </asp:AccordionPane>
77. <asp:AccordionPane ID="AccordionPane2" runat="server">
78. <Header>Pane 3</Header>
79. <Content>
80. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor cong
ue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
81. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
82. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
rpis egestas. Proin pharetra nonummy pede. Mauris et orci.
83. </Content>
84. </asp:AccordionPane>
85. </Panes>
86. </asp:Accordion>
87.
88. </div>
89. </form>
90. </body>
91. </html>

Notice that the page contains the definition of four Cascading Style Sheet
classes named accordion, accordionHeader, accordionHeaderSelected, and
accordionContent. These styles are applied to the Accordion control by
setting the CssClass, HeaderCssClass, HeaderSelectedCssClass, and
ContentCssClass properties.

The final result looks like this:

jax Control Toolkit AlwaysVisible Control

The AlwaysVisible control extends any [Link] control and lets you pin it to
the page so that it appears to float over the background body content when
it is scrolled or resized. The extender keeps the position of the control a
specified distance from the horizontal and vertical sides.
To avoid having the control flash and move when the page loads, you should
specify absolute positioning for the control and specify the location.

////

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

///////