Ajax

• Downloads • Toolkit • Showcase • Videos • Tutorials • Docs • Forums

SAMPLESHOME

Accordion

AlwaysVisibleControl

Animation

AsyncFileUpload

AutoComplete

Calendar

CascadingDropDown

CollapsiblePanel

ColorPicker

ComboBox

ConfirmButton

DragPanel

DropDown

DropShadow

DynamicPopulate

FilteredTextBox

HoverMenu

HTMLEditor

ListSearch

MaskedEdit

ModalPopup

MultiHandleSlider

MutuallyExclusiveCheckBox

NoBot

NumericUpDown

PagingBulletedList

PasswordStrength

PopupControl

Rating

ReorderList

ResizableControl

RoundedCorners

Seadragon

Slider

SlideShow

Tabs

TextBoxWatermark

ToggleButton

UpdatePanelAnimation

ValidatorCallout

WALKTHROUGHSGetting Started

Using a Sample Extender

Creating a New Extender

Toolkit Tutorials

Tookit Videos

Other Walkthroughs:Extender base class features

Using Animations

Animation Reference

Automated Testing

CascadingDropDown with

a Database

Other neat stuff

Accordion Demonstration

1. Accordion

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 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. 2. AutoSize

It also supports three AutoSize modes so it can fit in a variety of layouts.• None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move • up and down with it.• Limit - 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.• Fill - 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.

3. Control or Extender

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. 4. What is ASP.NET AJAX?

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. Fade Transitions: AutoSize: Accordion Description 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 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.

It also supports three AutoSize modes so it can fit in a variety of layouts. • None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and

• down with it.• Limit - 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.• Fill - 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.

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.

The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties. Accordion Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:Accordion

ID="MyAccordion"

runat="Server"

SelectedIndex="0"

HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent"

AutoSize="None"

FadeTransitions="true"

TransitionDuration="250"

FramesPerSecond="40"

RequireOpenedPane="false"

SuppressHeaderPostbacks="true">

<Panes>

<ajaxToolkit:AccordionPane

HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent">

<Header> . . . </Header>

<Content> . . . </Content>

</ajaxToolkit:AccordionPane>

.

.

.

</Panes>

<HeaderTemplate>...</HeaderTemplate>

<ContentTemplate>...</ContentTemplate>

</ajaxToolkit:Accordion>

• SelectedIndex - The AccordionPane to be initially visible• HeaderCssClass - Name of the CSS class to use for the headers. This can be either applied to the Accordion • as a default for all AccordionPanes, or an individual AccordionPane.• HeaderSelectedCssClass - Name of the CSS class to use for the selected header.• This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.

• ContentCssClass - Name of the CSS class to use for the content. This can be either applied to the

• Accordion as a default for all AccordionPanes, or an individual AccordionPane.• FadeTransitions - True to use the fading transition effect, false for standard transitions.• TransitionDuration - Number of milliseconds to animate the transitions• FramesPerSecond - Number of frames per second used in the transition animations• AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above.• RequireOpenedPane - Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.• SuppressHeaderPostbacks - Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your

headers for accessibility)• Panes - Collection of AccordionPane controls• HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding• ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding• DataSource - The data source to use. DataBind() must be called.• DataSourceID - The ID of the data source to use.• DataMember - The member to bind to when using a DataSourceID

Accordion Known Issues The AutoSize "Limit" mode works exactly the same as the "Fill" mode for Internet Explorer 6 and 7 because they do not support the max-height CSS property.

If you place the Accordion inside a <table> tag and have FadeTransitions set to true in Internet Explorer 6, it will affect the spacing between Accordion Panes.

Also, when viewing the demo in Internet Explorer 6, maximizing the browser at higher resolutions like 1600 x 1200 will cause the transitions to animate slower than at lower resolutions like 1280 x 1024.

AlwaysVisibleControl DemonstrationCurrent Time:4:27:51 PM

Choose a position for the clock from the list below. Scroll your browser window to see the control maintain its always-visible position. Position: AlwaysVisibleControl Description The AlwaysVisibleControl is a simple extender allowing you to pin controls to the page so that they appear to float over the background body content when it is scrolled or resized. It targets any ASP.NET control and always keeps the position a specified distance from the desired horizontal and vertical sides.

To avoid having the control flash and move when the page loads, it is recommended that you absolutely position the control in the desired location in addition to attaching the extender. AlwaysVisibleControl Properties The always visible extender has been initialized with these properties. The properties in italics are optional.

<ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server"

TargetControlID="timer"

VerticalSide="Top"

VerticalOffset="10"

HorizontalSide="Right"

HorizontalOffset="10"

ScrollEffectDuration=".1"/>

• TargetControlID - ID of control for this extender to always make visible• HorizontalOffset - Distance to the HorizontalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.• HorizontalSide - Horizontal edge of the browser (either Left, Center, or Right) used to anchor the target control. The default is Left.• VerticalOffset - Distance to the VerticalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.• VerticalSide - Vertical edge of the browser (either Top, Middle, or Bottom) used to anchor the target control. The default is Top.• ScrollEffectDuration - Length in seconds of the scrolling effect to last when the target control is repositioned. The default is .1 second.• UseAnimation - Whether or not to animate the element into position. The default is false.

Additional Text For Scrolling ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.




ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft

integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.



Animation DemonstrationThe animation support in the Toolkit is more than just a control. It's a pluggable, extensible framework for easily adding animation effects to your web pages. The sample below demonstrates a composite animation consisting of four primary animation actions, done in parallel:

• Move (to move the panel to its final location)• Resize (to change the size of the panel)• Fade (to fade the text in/out)• Color (the flyout changes from gray to white and the text pulses red)

By composing basic animations (there are many to choose from!) you can create very sophisticated effects, or use them independently from client code, server-side code, or XML markup. Animation Description The AnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.

The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference. Animation Properties The animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):

<ajaxToolkit:AnimationExtender ID="ae"

runat="server" TargetControlID="ctrl">

<Animations>

<OnLoad> ... </OnLoad>

<OnClick> ... </OnClick>

<OnMouseOver> ... </OnMouseOver>

<OnMouseOut> ... </OnMouseOut>

<OnHoverOver> ... </OnHoverOver>

<OnHoverOut> ... </OnHoverOut>

</Animations>

</ajaxToolkit:AnimationExtender>

• TargetControlID - ID of the target control whose events are used to animate (this is also the default target of the animations)• OnLoad - Generic animation played as soon as the page is loaded• OnClick - Generic animation played when the target control is clicked• OnMouseOver - Generic animation played when the mouse moves over the target control• OnMouseOut - Generic animation played when the mouse moves out of the target control• OnHoverOver - Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays• OnHoverOut - Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays

AsyncFileUpload DemonstrationClick 'Select File' for asynchronous uploading.

The latest Server-side event:

Client-side events:

AsyncFileUpload Description AsyncFileUpload is an ASP.NET AJAX Control that allows you asynchronously upload files to server. The file uploading results can be checked both in the server and client sides. You can save the uploaded file by calling the SaveAs() method in a handler for the server UploadedComplete event. AsyncFileUpload Events, Properties and Methods The control above is initialized with this code. The italic properties are optional:<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"

OnClientUploadComplete="uploadComplete" runat="server"

ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"

UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"

/>

Events • UploadedComplete - Fired on the server side when the file successfully uploaded• UploadedFileError - Fired on the server side when the uloaded file is corrupted

Properties • CompleteBackColor - The control's background color on upload complete. Default value - 'Lime'.• ContentType - Gets the MIME content type of a file sent by a client. • ErrorBackColor - The control's background color on upload error. Default value - 'Red'.• FileContent - Gets a Stream object that points to an uploaded file to prepare for reading the contents of the file. • FileName - Gets the name of a file on a client to upload using the control. • HasFile - Gets a bool value indicating whether the control contains a file. • OnClientUploadComplete - The name of a javascript function executed in the client-side after the file successfully uploaded• OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed• OnClientUploadStarted - The name of a javascript function executed in the client-side on the file uploading started• PostedFile - Gets a HttpPostedFile object that provides access to the uploaded file. • ThrobberID - ID of control that is shown while the file is uploading. • UploaderStyle - The control's appearance style (Traditional, Modern). Default value - 'Traditional'.• UploadingBackColor - The control's background color when uploading is in progress. Default value - 'White'.• Width - The control's width (Unit). Default value - '355px'.

Methods • SaveAs(string filename) - Saves the contents of an uploaded file.

AutoComplete DemonstrationType some characters in this textbox. The web service returns random words that start with the text you have typed.

AutoComplete Description AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the

textbox.

The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.

In the sample above, the textbox is associated with an AutoCompleteExtender that pulls words that start with the contents of the textbox using a web service.

When you have typed more content than the specified minimum word length, a popup will show words or phrases starting with that value. Caching is turned on, so typing the same prefix multiple times results in only one call to the web service. AutoComplete Properties The textbox is linked with an AutoCompleteExtender which is initialized with this code. The italic properties are optional:

<ajaxToolkit:AutoCompleteExtender

runat="server"

ID="autoComplete1"

TargetControlID="myTextBox"

ServiceMethod="GetCompletionList"

ServicePath="AutoComplete.asmx"

MinimumPrefixLength="2"

CompletionInterval="1000"

EnableCaching="true"

CompletionSetCount="20"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

DelimiterCharacters=";, :"

ShowOnlyCurrentWordInCompletionListItem="true">

<Animations>

<OnShow> ... </OnShow>

<OnHide> ... </OnHide>

</Animations>

</ajaxToolkit:AutoCompleteExtender>

• TargetControlID - The TextBox control where the user types content to be automatically completed• ServiceMethod - The web service method to be called. The signature of this method must match the following:

• [System.Web.Services.WebMethod]

• [System.Web.Script.Services.ScriptMethod]

public string[] GetCompletionList(string prefixText, int count) { ... }

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is• not provided, the service method should be a page method.• ContextKey - User/page specific context provided to an optional overload of the web method described • by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional• parameter named contextKey of type string:



• public string[] GetCompletionList(

string prefixText, int count, string contextKey) { ... }

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled • if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have • the same signature with an additional parameter named contextKey of type string (as described above).• MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from • the web service.• CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.• EnableCaching - Whether client side caching is enabled.• CompletionSetCount - Number of suggestions to be retrieved from the web service.• CompletionListCssClass - Css Class that will be used to style the completion list flyout.• CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.• CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the• AutoComplete list flyout.• DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete • textbox is tokenized using these characters and the webservice completes the last token.• FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.• ShowOnlyCurrentWordInCompletionListItem - If true and DelimiterCharacters are specified, then the• AutoComplete list items display suggestions for the current word to be completed and do not display the rest of the tokens.• Animations - Generic animations for the AutoComplete extender. See the Using Animations walkthrough and

• Animation Reference for more details. • OnShow - The OnShow animation will be played each time the AutoComplete completion list is displayed. • The completion list will be positioned correctly but hidden. • The animation can use <HideAction Visible="true" /> to display the completion list along• with any other visual effects.• OnHide - The OnHide animation will be played each time the AutoComplete completion list is hidden.

Calendar Demonstration

Default calendar:

(Set the focus to the textbox to show the calendar)

Calendar with a custom style and formatted date (opening on left):

(Set the focus to the textbox to show the calendar)

Calendar with an associated button:

(Click the image button to show the calendar; this calendar dismisses automatically when you choose a date)

Calendar Description Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.

In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.

The page uses the culture setting English (United States) which was specified by the browser. The page properties have Culture="auto" and UICulture="auto" set to enable the same. See this MSDN article for more information. The ScriptManager on this Calendar demo page has

EnableScriptGlobalization="true" and EnableScriptLocalization="true". Calendar Properties The calendar associated with a button has been initialized with this code. The properties in italic are optional:

<ajaxToolkit:Calendar runat="server"

TargetControlID="Date1"

CssClass="ClassName"

Format="MMMM d, yyyy"

PopupButtonID="Image1" />

• TargetControlID - The ID of the TextBox to extend with the calendar.• CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.• Format - Format string used to display the selected date.• PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar • will pop up when the textbox receives focus.• PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft,• TopRight, Left or Right of the TextBox.• SelectedDate - Indicates the date the Calendar extender is initialized with.

Calendar Theming You can change the look and feel of Calendar using the Calendar CssClass property. Calendar has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find them in the Toolkit solution, in the "AjaxControlToolkit\Calendar\Calendar.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Calendar control can be styled accordingly. The second calendar in the demo above uses the "MyCalendar" style. which sets the Calendar container style as follows.

.MyCalendar .ajax__calendar_container {

border:1px solid #646464;

background-color: lemonchiffon;

color: red;

}

Calendar Css Classes • .ajax__calendar_container : The outer rectangular container that supplies the border around the calendar element.• Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer. • .ajax__calendar_header : A container element that holds the next and previous arrows and the title of the current view. • Child Css classes: .ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next. • .ajax__calendar_prev : An element that displays the arrow to view the previous set of data in the • view(previous month/year/decade). Child Css classes: none. • .ajax__calendar_title : An element that displays the title of the current view (month name, year, decade).• Child Css classes: none. • .ajax__calendar_next : An element that displays the arrow to view the previous set of data in the view• (previous month/year/decade). Child Css classes: none. • .ajax__calendar_body : A container element that holds the days, months, and years panes. Also provides a fixed rectangle• with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years).• Child Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years. • .ajax__calendar_days : A container element that holds the layout for the days in a month. • Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day • .ajax__calendar_dayname : An element that displays the short name of the day of the week. Child Css classes: none.• .ajax__calendar_day : An element that displays the day of the month. Child Css classes: none • .ajax__calendar_months : A container element that holds the layout for the months in a year.• Child Css classes: .ajax__calendar_month. • .ajax__calendar_month : An element that displays the month of the year. Child Css classes: none • .ajax__calendar_years : A container element that holds the layout for the years in a decade.• Child Css classes: .ajax__calendar_year. • .ajax__calendar_year : An element that displays the year in a decade. Child Css classes: none • .ajax__calendar_footer : A container element that holds the current date. Child Css classes: .ajax__calendar_today.• .ajax__calendar_today : An element that displays the current date. Child Css classes: none.• .ajax__calendar_hover : This is applied to an element in the DOM above a day, month or year and is used to apply

• CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year • .ajax__calendar_active : This is applied to an element in the DOM above a day, month or year and is used to apply CSS• attributes that show the currently selected value. Child Css classes: .ajax__calendar_day, .ajax__calendar_month,• .ajax__calendar_year.• .ajax__calendar_other : This is applied to an element in the DOM above a day or year that is outside of the current

• view (day not in the visible month, year not in the visible decade). Child Css classes: .ajax__calendar_day,

• .ajax__calendar_year.

CascadingDropDown Demonstration

MakeModelColor

[No response provided yet] CascadingDropDown Description CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control to get automatic population of a set of DropDownList controls. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.

CascadingDropDown enables a common scenario in which the contents of one list depends on the selection of another list and does so without having to embed the entire data set in the page or transfer it to the client at all. All the logic about the contents of the set of DropDownList controls lives on the server in a web service. This web service can use any suitable method for storing and looking up the relevant data. The sample web service used here reads the data set from a simple hierarchical XML data file. The sample data file shows that the DropDownList items can have distinct names and value (values are optional in the sample). There is also a walkthrough showing how to use a CascadingDropDown with a database. CascadingDropDown Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"

TargetControlID="DropDownList2"

Category="Model"

PromptText="Please select a model"

LoadingText="[Loading models...]"

ServicePath="CarsService.asmx"

ServiceMethod="GetDropDownContents"

ParentControlID="DropDownList1"

SelectedValue="SomeValue" />

• TargetControlID - The ID of the DropDownList to populate.• Category - The name of the category this DropDownList represents.• PromptText - Optional text to display before the user has selected a value from the DropDownList.• PromptValue - Optional value set when PromptText is displayed.• EmptyText - Optional text to display when the DropDownList has no data to display.• EmptyValue - Optional value set when EmptyText is displayed.• LoadingText - Optional text to display while the data for the DropDownList is being loaded.• ServicePath - Path to a web service that returns the data used to populate the DropDownList. This property should be• left null if ServiceMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.• ScriptService attribute.• ServiceMethod - Web service method that returns the data used to populate the DropDownList. The signature of this method• must match the following:



• public CascadingDropDownNameValue[] GetDropDownContents(

string knownCategoryValues, string category) { ... }

Note that you can replace "GetDropDownContents" with a naming of your choice, but the return type and parameter name and type must exactly match, including case.

• ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/• ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of• type string:



• public CascadingDropDownNameValue[] GetDropDownContents(

string knownCategoryValues, string category, string contextKey) { ... }

Note that you can replace "GetDropDownContents" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the• ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type

string (as described above).• ParentControlID - Optional ID of the parent DropDownList that controls the contents of this DropDownList.• SelectedValue - Optional value to select by default. This needs to exactly match the string representation of a value

• in the DropDownList.

ColorPicker DemonstrationDefault color picker:

(Set the focus to the textbox to show the color picker popup; the popup dismisses automatically when you choose a

color)

ColorPicker with an associated button and a sample control:

(Click the image button to show the color picker; enter a valid color value in to the TextBox to have a sample

control show the color)

ColorPicker Description ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. You can interact with the color picker by clicking on a color to select the color. Optionally, a PopupButton control and a SampleControl can be provided which allows customizing ColorPicker's behavior.

In addition, if a custom color value is entered in a targeted TextBox then the sample control if it's used can demonstrate a custom color even if it's not in a color picker palette. ColorPicker Properties The first example of the color picker has been initialized with this code:

<ajaxToolkit:ColorPickerExtender runat="server"

ID="ColorPickerExtender1"

TargetControlID="Color1"

OnClientColorSelectionChanged="colorChanged" />

A colorChanged JavaScript function has been defined as following:

function colorChanged(sender) {

sender.get_element().style.color =

"#" + sender.get_selectedColor();

}

The color picker associated with a button has been initialized with this code. The properties in italic are optional:

<ajaxToolkit:ColorPickerExtender runat="server"

TargetControlID="Color2"

PopupButtonID="Image1"

SampleControlID="Sample1"

SelectedColor="33ffcc" />

• TargetControlID - The ID of the TextBox to extend with the color picker.• PopupButtonID - The ID of a control to show the ColorPicker popup when clicked. If this value is not set, the color picker • will pop up when the textbox receives focus.• SampleControlID - The ID of a control to show the ColorPicker's selected color. If this value is set and the color picker• popup is open the background color of the sample control will sample the hovered color. If this value is not set, the selected• color is not shown.• PopupPosition - Indicates where the color picker popup should appear at the BottomLeft(default), BottomRight, TopLeft,• TopRight, Left or Right of the TextBox.• SelectedColor - Indicates the color value the ColorPicker extender is initialized with.• OnClientColorSelectionChanged - A client JavaScript function that will be called when the colorSelectionChanged

• event is raised.ColorPicker Theming It is not supported yet but will be available soon via the ColorPicker CssClass property. ColorPicker has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find them in the Toolkit solution, in the "AjaxControlToolkit\ColorPicker\ColorPicker.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ColorPicker control can be styled accordingly.

ComboBox Demonstration<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"

AutoPostBack="False"

DropDownStyle="DropDownList"

AutoCompleteMode="SuggestAppend"

CaseSensitive="False"

CssClass=""

ItemInsertLocation="Append" ... >

AutoPostBack: DropDownStyle: Simple DropDown DropDownList AutoCompleteMode: None Suggest Append SuggestAppend CaseSensitive: CssClass: [Empty String] AjaxControlToolkit Aqua Windows ItemInsertLocation: Append Prepend OrdinalText OrdinalValue ComboBox Description ComboBox is an ASP.NET AJAX control that, like the AutoCompleteExtender, combines the flexibility of a TextBox with a list of options that users are able to choose from. It borrows many of its properties, behaviors, and naming conventions from the Windows Forms ComboBox control, and is derived from the same base class as the ListBox, BulletedList, and DropDownList web controls. In fact, a ComboBox is best described as a DropDownList that can be typed directly into like a TextBox.

Working with a ComboBox in code is also a lot like working with a DropDownList. It has all of the same properties and events as a DropDownList, with a few additional ComboBox-specific properties and events. Firstly, it can be configured to either prevent or allow user-typed text that does not match an item in the list. When user-typed text does match an item in the list, the ComboBox can also be configured to auto-complete the text based on the first matched item in the list, to show the list and highlight the first matched item, or to do both simultaneously. When user-typed text does not match an item in the list, the ComboBox raises ItemInserting and ItemInserted events which can be handled during postback. Other than these special behaviors, the ComboBox behaves essentially like a DropDownList.

The ComboBox is intended as a supplement to, rather than a replacement for, the AutoCompleteExtender. Though there are many scenarios where either could be used to satisfy the same user interface requirements, there are scenarios where one control could offer particular advantages or disadvantages compared to the other: • Data Binding - The ComboBox can bind to data source controls like SqlDataSource and ObjectDataSource, and to runtime objects that implement IListSource, IEnumerable, or

IDataSource. Like the DropDownList, the ComboBox also has an Items collection that can be manipulated declaratively and/or programmatically. The AutoCompleteExtender can only get its item list from a web service or page method. When it is possible and more convenient to bind to a data source control, runtime object, or declared item list, the ComboBox may be a better choice than the AutoCompleteExtender.

• Restricting User-Typed Text - Another feature of the ComboBox is that it can restrict input so that an item in the list is always selected after a postback (as long as the Items collection is not empty). The AutoCompleteExtender allows users to type anything into the TextBox being extended, even if the typed text doesn't match any options returned by the extender's ServiceMethod. A ComboBox may be a better fit for user interfaces which require a predetermined item be selected from the list (like a foreign key input).

• Composite Items - Items in a ComboBox, like items in a DropDownList, have both Text and Value properties. The only user input value offered by the AutoCompleteExtender is the Text property of the TextBox being extended. If the items in your list can be modeled with different Text and Value properties, the ComboBox may provide a better match for the data items being listed (again, foreign keys can be a good example of this).

• Long Item Lists / Multiple Input Controls - All of the items in a ComboBox's list will be rendered to the web page it exists in. The AutoCompleteExtender, on the other hand, retrieves items from its ServiceMethod after the page is rendered. When your ComboBox contains a rather long list of items, or when you have a relatively large number of ComboBoxes on the same page (or within the same UpdatePanel), load times could be slowed down significantly. When ComboBoxes perform slowly because of the amount of markup they must render to the browser, an AutoCompleteExtender can be used instead to increase performance.

• Partial Auto-Completion - The auto-complete feature of the ComboBox will only match items that start with the first user-typed character. An AutoCompleteExtender's ServiceMethod, on the other hand, can be configured to match items where the user-typed text lies somewhere after the first character in the item. A ComboBox cannot be used in application scenarios that require items to be "partially matched" like this.

• Multiple Item Selection - The ComboBox, like the DropDownList, will only allow one item to be selected at a time. The AutoCompleteExtender can be configured to allow users to select multiple items simultaneously (using the AutoCompleteExtender's DelimiterCharacters property), like a ListBox or CheckBoxList. When users must have the ability to submit multiple items in a single postback, the AutoCompleteExtender should be used instead of the ComboBox.

ComboBox Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"

DropDownStyle="DropDown"

AutoCompleteMode="None"

CaseSensitive="false"

RenderMode="Inline"

ItemInsertLocation="Append"

ListItemHoverCssClass="ComboBoxListItemHover"

<asp:ListItem>...</asp:ListIem>

...

</ajaxToolkit:ComboBox>

• DropDownStyle - Determines whether the user is allowed to enter text that does not match an item in the list, and whether• the list is always displayed. If "DropDownList" is specified, users are not allowed to enter text that does not match an item in • the list. When "DropDown" (the default value) is specified, any text is allowed. If "Simple" is specified, any text is allowed and• the list is always displayed regardless of the AutoCompleteMode property value.• AutoCompleteMode - Determines how the ComboBox automatically completes the text that is typed into it. When "Suggest"• is specified, the ComboBox will show the list, highlight the first matched item, and if necessary, scroll the list to show the• highlighted item. If "Append" is specified, the ComboBox will append the remainder of the first matched item to the user-typed• text and highlight the appended text. When "SuggestAppend" is specified, both of the above behaviors are applied. If "None"• (the default value) is specified, the ComboBox's auto-complete behaviors are disabled.• CaseSensitive - Specifies whether user-typed text is matched to items in the list in a case-sensitive manner.• The default is "false".• RenderMode - Specifies whether the ComboBox is rendered as an "Inline" or "Block" level HTML element. • The default is "Inline".• ItemInsertLocation - Determines whether to "Append" or "Prepend" new items when they are inserted into the list,• or whether to insert them in an "Ordinal" manner (alphabetically) based on the item Text or Value. The default is "Append".• ListItemHoverCssClass - When specified, replaces the default styles applied to highlighted items in the list with a• custom css class.• ListItem - One or more child controls used to declare items that will be added to the ComboBox list. When bound to a• data source, all declared ListItems will be removed unless the AppendDataBoundItems property is set to "true".

ComboBox Known Issues When ListItemHoverCssClass is specified and the ComboBox list is scrollable, highlighting a list item will cause the scrollbar to flicker when using the Internet Explorer web browser. To avoid this issue, do not specify the ListItemHoverCssClass property. ComboBox Theming You can change the look and feel of the ComboBox using the ComboBox CssClass property. The ComboBox has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\ComboBox\

ComboBox.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is displayed when "[Empty String]" is selected as the CssClass. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ComboBox control can be styled accordingly. For example, if the CssClass property was set to "CustomComboBoxStyle", this is how the css to style the border and background color would look:

.CustomComboBoxStyle .ajax__combobox_textboxcontainer input {

background-color: #ADD8E6;

border: solid 1px Blue;

border-right: 0px none;

}

.CustomComboBoxStyle .ajax__combobox_buttoncontainer button {

background-color: #ADD8E6;

border: solid 1px Blue;

}

ComboBox Css classes • .ajax__combobox_inputcontainer: A table element that contains and positions the ComboBox's button and text box input• elements. Child Css classes: ajax__combobox_textboxcontainer, ajax__combobox_buttoncontainer.• .ajax__combobox_textboxcontainer: The table cell that contains the ComboBox's text box input element.• .ajax__combobox_buttoncontainer: The table cell that contains the ComboBox's button element.• .ajax__combobox_itemlist: The ul element that contains the ComboBox's list item (li) elements.

ConfirmButton DemonstrationClick Me

ConfirmButton Description

ConfirmButton is a simple extender that catches clicks on a button (or any instance of a type derived from Button) and displays a message to the user. If the "OK" button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user. ConfirmButton Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"

TargetControlID="LinkButton1"

ConfirmText="Are you sure you want to click this?"

OnClientCancel="CancelClick" />

• TargetControlID - The ID of the button or link for this extender to operate on.• ConfirmText - The text to show when you want to confirm the click. (Note: HTML entities can be used here (ex: "
"• for new-line))• OnClientCancel - The client-side script that executes when the cancel button is clicked in the confirm dialog.• ConfirmOnFormSubmit - True if the confirm dialog should wait until just before the form submits to display. This is useful • when ASP.NET validators are in use and the confirm should be shown only after all validators pass.• DisplayModalPopupID - Optionally specifies the ID of a ModalPopup control to use for displaying the confirmation dialog• (instead of window.confirm). When using DisplayModalPopupID, the following conditions must be met:

• The ModalPopup must be configured to work against the same TargetControlID as the ConfirmButton • (and should work properly if the ConfirmButton is disabled).• The ModalPopup must specify OkControlID and/or CancelControlID to identify the buttons corresponding to • window.confirm's OK/Cancel buttons.• The ModalPopup must not specify OnOkScript or OnCancelScript.

DropDown DemonstrationHover over the text below and click to select an option:

Select your favorite exotic ice-cream flavor DropDown Description DropDown is an ASP.NET AJAX extender that can be attached to almost any ASP.NET control to provide

a SharePoint-style drop-down menu. The displayed menu is merely another panel or control. In the above sample the drop-down is a Panel which contains LinkButtons. The drop-down is activated by left- or right-clicking the attached control. If the behavior is attached to a Hyperlink or LinkButton, clicking on the link itself will operate normally. DropDown Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:DropDownExtender runat="server" ID="DDE"

TargetControlID="TextLabel"

DropDownControlID="DropPanel" />

• TargetControlID - The ID of the control which needs a drop-down.• DropDownControlID - The ID of the control which will be displayed as the dropdown.• Animations - Generic animations for the DropDown extender. See the Using Animations walkthrough and • Animation Reference for more details.

• OnShow - The OnShow animation will be played each time the dropdown is displayed. The dropdown will be • positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the• dropdown along with any other visual effects.• OnHide - The OnHide animation will be played each time the dropdown is hidden.

DropShadow DemonstrationFirst Name:

Last Name:

Expand

Show Drop Shadow: Rounded: Radius: 2 4 6 10 Opacity: 25% 50% 75% 100% DropShadow Description DropShadow is an extender which applies a "Drop Shadow" to a Panel. It allows you to specify how wide the shadow is as well as how opaque it is, or if you would like rounded corners. For pages that allow the user to move or resize the panel, the DropShadow has a mode that will resize/reposition it to

match that of the target panel at run time. DropShadow Properties The control above is initialized with this code. The properties in italic are optional.

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"

TargetControlID="Panel1"

Opacity=".8"

Rounded="true"

TrackPosition="true" />

• TargetControlID - The ID of the button or link for this extender to operate on• Width - The width, in pixels of the drop shadow. Default value is 5.• Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5.• TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is• absolutely positioned or will otherwise move.• Rounded - Set to true to set rounded corners on the target and the shadow. Default is false.

DynamicPopulate DemonstrationTime at the server: Choose a date/time format:NormalShort DateLong DateUTC Date/Time

This time is dynamically formatted and returned as HTML from the server:9/28/2010 7:13:28 AM

DynamicPopulate Description DynamicPopulate is a simple extender that replaces the contents of a control with the result of a web service or page method call. The method call returns a string of HTML that is inserted as the children of

the target element. DynamicPopulate Properties The control above is initialized with this code. The properties in italic are optional. The CustomScript or the ServiceMethod field needs to be specified.

<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"


ClearContentsDuringUpdate="true"

PopulateTriggerControlID="Label1"

ServiceMethod="GetHtml"

UpdatingCssClass="dynamicPopulate_Updating" />

• TargetControlID - The ID of the button or link for this extender to operate on• ClearContentsDuringUpdate - true (default) to clear the HTML contents of the target element when an update begins• ServicePath - The URL of the web service to call. Leave this parameter blank and specify a ServiceMethod to call a PageMethod. The web service should be decorated with the

System.Web.Script.Services.ScriptService attribute.• ServiceMethod - The name of the method to call on the page or web service. The signature of this method must match the following:

•



string DynamicPopulateMethod(string contextKey) { ... }

Note you can replace "DynamicPopulateMethod" with a naming of your choice, but the return type and parameter name and type must exactly match, including case.• PopulateTriggerControlID - The optional name of a control that, when clicked, triggers the population of the target.• UpdatingCssClass - The CSS class to apply to the target during asynchronous calls.• CustomScript - The script to invoke instead of calling a Web or Page method. This script must evaluate to a string value.

• ContextKey - An arbitrary string value to be passed to the web method. For example, if the element to be populated is within a data-bound repeater, this could be the ID of the current row.

• CacheDynamicResults - Whether the results of the dynamic population should be cached and not fetched again after the first load. The default value is false.

FilteredTextBox Demonstration

Only digits are allowed here:Only lower-case letters are allowed here:Only math symbols (+,-,*,/,=,.) and numbers:No digits allowed in this textbox:

FilteredTextBox Description FilteredTextBox is an extender which prevents a user from entering invalid characters into a text box. Note that since this effect can be avoided by deactivating JavaScript, you should use this extender as a convenience for your users, but you must never expect that the data being sent to the server consists of "valid" chars only. FilteredTextBox Properties The math-symbols example above is initialized with this code:

<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"

TargetControlID="TextBox3"

FilterType="Custom, Numbers"

ValidChars="+-=/*()." />

• TargetControlID - The ID of the text box for this extender to operate on• FilterType - A the type of filter to apply, as a comma-separated combination of Numbers, LowercaseLetters, UppercaseLetters

field will be used in addition to other settings such as Numbers.• FilterMode - A the filter mode to apply, either ValidChars (default) or InvalidChars. If set to InvalidChars, FilterType must be set to Custom; if set to ValidChars, FilterType must

contain Custom.• ValidChars - A string consisting of all characters considered valid for the text field, if "Custom" is specified as the filter type. Otherwise this parameter is ignored.• InvalidChars - A string consisting of all characters considered invalid for the text field, if "Custom" is specified as the filter type and "InvalidChars" as the filter mode. Otherwise this

parameter is ignored.• FilterInterval - An integer containing the interval (in milliseconds) in which the field's contents are filtered, defaults to 250.

ListSearchExtender Demonstration

Click on this ListBox and start typing to search for an entry:

It works for a DropDownList too. In this case, instead of searching for a string that starts with the word we get words that contain the typed word. It resets the search query after 2 seconds if no match is found.

ListSearchExtender Description The ListSearchExtender lets you search for items in a ListBox or DropDownList by typing. The extender performs an incremental search within the ListBox based on what has been typed so far. The prompt message that gets displayed when you click the list can be customized along with its CSS class and position.ListSearchExtender Properties The controls above are initialized with code like this. The italic properties are optional:

<ajaxToolkit:ListSearchExtender id="LSE" runat="server"

TargetControlID="ListBox1"

PromptText="Type to search"

PromptCssClass="ListSearchExtenderPrompt"

PromptPosition="Top"

AutoResetTimeout="0"

IsSorted="true"/>

• PromptText - Message to display when the ListBox or DropDownList is given focus. Default is 'Type to search'. The PromptText is replaced by the search text typed by the user.• PromptCssClass - The name of the CSS class to apply to the prompt message.• PromptPosition - Indicates whether the message should appear at the Top or Bottom of the ListBox. The default is Top. • QueryPattern - Indicates how the typed characters should be used in the search query. The default pattern queries for results that start with the typed word. • IsSorted - Indicates if items added to the List are expected to be sorted. The default is false. If set to true it allows the code to perform a faster search instead of having to determine

the same before performing the search.• QueryTimeout - Indicates whether the search query should be reset after the timeout if no match is found. The default is 0, meaning no auto reset behavior. • Animations - Generic animations for the ListSearch extender. See the Using Animations walkthrough and Animation Reference

• OnShow - The OnShow animation will be played each time the extender's prompt is displayed. The prompt will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the prompt along with any other visual effects.

• OnHide - The OnHide animation will be played each time the extender's prompt is hidden.ListSearchExtender Known Issues In Safari the ListSearchExtender only works with ListBoxes, not DropDownLists.

In Opera the backspace key moves back a page in the browser history by default when it is pressed on a ListBox or DropDownList. To change this behavior you can go to Tools|Preferences|Shortcuts, edit the Keyboard setup, search for “back” and change the mapping for “Platform Windows-Unix-MCE, Backspace” to “Backspace” instead of “Backspace | Back”

MutuallyExclusiveCheckBox Demonstration

Must HaveGuest Bed DownstairsSplit PlanCovered PatioGated CommunityGolf CommunityCommunity PoolSold Out

Must Not HaveGuest Bed DownstairsSplit PlanCovered PatioGated CommunityGolf CommunityCommunity PoolSold Out

MutuallyExclusiveCheckBox Description MutuallyExclusiveCheckBox is an ASP.NET AJAX extender that can be attached to any ASP.NET CheckBox control. By adding a number of checkboxes to the same "Key", only one checkbox with the specified key can be checked at a time. This extender is useful when a number of choices are available but only one can be chosen, similar to a radio button. The use of checkboxes however allows you to choose to uncheck a value which is not possible normally with radio buttons. This also provides a more consistent and expected interface than using javascript to allow the de-selection of a RadioButton item. MutuallyExclusiveCheckBox Properties The control above is initialized with this code.

<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"

ID="MustHaveGuestBedroomCheckBoxEx"

TargetControlID="MustHaveGuestBedroomCheckBox"

Key="GuestBedroomCheckBoxes" />

• TargetControlID - The ID of the CheckBox to modify• Key - The unique key to use to associate checkboxes. This key does not respect INamingContainer renaming.

NumericUpDown Demonstration

Enter a numeric value and use the up and down buttons to increment/decrement (min:1 and max:7)

Choose your favorite month

Let the web service pick a random number between 0 and 1000 that is higher/lower than the displayed value

Use the arrow images to increment/decrement the value

[No response provided yet] NumericUpDown Description NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Page authors can also provide custom images to be used instead of the default up/down button graphics. NumericUpDown Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"


Width="100"

RefValues="January;February;March;April"

TargetButtonDownID="Button1"

TargetButtonUpID="Button2"

ServiceDownPath="WebService1.asmx"

ServiceDownMethod="PrevValue"

ServiceUpPath="WebService1.asmx"

ServiceUpMethod="NextValue"

Tag="1" />

• TargetControlID - The ID of the TextBox to modify• Width - Combined size of the TextBox and Up/Down buttons (min value 25). This property is not used if you provide custom buttons.• RefValues - A list of strings separated by semicolons (;) to be used as an enumeration by NumericUpDown• Step - Step used for simple numeric incrementing and decrementing. The default value is 1.• TargetButtonDownID/TargetButtonUpID - Reference to custom Up/Down buttons.• ServiceDownPath/ServiceUpPath - Path to a web service that returns the data used to get the next or previous value. This property should be left null if ServiceUpMethod or

ServiceDownMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService attribute.• ServiceDownMethod/ServiceUpMethod - Web service method that returns the data used to get the next or previous value, or the name of a method declared on the Page which is

decorated with the WebMethodAttribute. The signature of this method must match the following:



public int NextValue(int current, string tag) { ... }

Note you can replace "NextValue" with a name of your choice, but the return type and parameter name and type must exactly match, including case.• Tag - Specifies a custom parameter to pass to the Web Service• Minimum - The minimum value allowed by the extender. Currently, it does not prevent out of range values from being entered into the textbox even if Minimum or Maximum are

specified on the extender, but using the up/down buttons should bring the value into the allowed range when clicked.• Maximum - The maximum value allowed by the extender.

NumericUpDown Known Issues The display of the default up/down buttons in Safari is such that Safari's "shiny" button style makes the

up/down arrows difficult to see. Custom images can be used for complete control over the appearance.

PasswordStrength DemonstrationSimple Complexity, Text Indicator

Average Complexity, Bar Indicator

High Complexity, Text Indicator, Help Indicator

Note: Recent changes will cause the PasswordStrength control to render differently

compared to previous releases. This will affect the padding attributes of the BarIndicator

display type. To achieve the same style as previous releases, you will need to add the

following to the style for that control.

padding: 2px 2px 2px 2px;

PasswordStrength Description PasswordStrength is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control used for the entry of passwords. The PasswordStrength extender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable. The required strength of the password is also configurable, allowing the page author to tailor the password strength requirements to their needs. The text messages that describe the current strength of the password can also be configured and their default values have localization support built-in. The second and third extenders' strings are being pulled from Toolkit resources files. We do not have strings for all languages currently so they may show non-localized values for some languages. A help indicator can be used to provide explicit instructions about what changes are required to achieve a strong password. The indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus. PasswordStrength Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:PasswordStrength ID="PS" runat="server"


DisplayPosition="RightSide"

StrengthIndicatorType="Text"

PreferredPasswordLength="10"

PrefixText="Strength:"

TextCssClass="TextIndicator_TextBox1"

MinimumNumericCharacters="0"

MinimumSymbolCharacters="0"

RequiresUpperAndLowerCaseCharacters="false"

TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"

TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cssClass5

CalculationWeightings="50;15;15;20" />

• TargetControlID - ID of the TextBox to attach to• DisplayPosition - Positioning of the strength indicator relative to the target control• StrengthIndicatorType - Strength indicator type (Text or BarIndicator)• PreferredPasswordLength - Preferred length of the password• PrefixText - Text prefixed to the display text when StrengthIndicatorType=Text• TextCssClass - CSS class applied to the text display when StrengthIndicatorType=Text• MinimumNumericCharacters - Minimum number of numeric characters

• MinimumSymbolCharacters - Minimum number of symbol characters (ex: $ ^ *)• RequiresUpperAndLowerCaseCharacters - Specifies whether mixed case characters are required• MinimumLowerCaseCharacters - Only in effect if RequiresUpperAndLowerCaseCharacters property is true. Specifies the• minimum number of lowercase characters required when requiring mixed case characters as part of your password strength• considerations.• MinimumUpperCaseCharacters - Only in effect if RequiresUpperAndLowerCaseCharacters property is true. Specifies the• minimum number of uppercase characters required when requiring mixed case characters as part of your password strength• considerations.• TextStrengthDescriptions - List of semi-colon separated descriptions used when StrengthIndicatorType=• Text (Minimum of 2, maximum of 10; order is weakest to strongest)• CalculationWeightings - List of semi-colon separated numeric values used to determine the weighting of a strength • characteristic. There must be 4 values specified which must total 100. The default weighting values are defined as 50;15;15;20. • This corresponds to password length is 50% of the strength calculation, Numeric criteria is 15% of strength calculation, • casing criteria is 15% of calculation, and symbol criteria is 20% of calculation. So the format is 'A;B;C;D' where A = length • weighting, B = numeric weighting, C = casing weighting, D = symbol weighting.• BarBorderCssClass - CSS class applied to the bar indicator's border when StrengthIndicatorType=BarIndicator• BarIndicatorCssClass - CSS class applied to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator• StrengthStyles - List of semi-colon separated CSS classes that are used depending on the password's strength. • This property will override the BarIndicatorCssClass / TextIndicatorCssClass property if present.• The BarIndicatorCssClass / TextIndicatorCssClass property differs in that it attributes one CSS style to the BarIndicator or • Text Strength indicator (depending on which type is chosen) regardless of password strength. This property will cause the• style to change based on the password strength and also to the number of styles specified in this property• . For example, if 2 styles are defined like StrengthStyles="style1;style2" then style1 is applied when the password strength• is less than 50%, and style2 is applied when password strength is >= 50%. This property can have up to 10 styles.• HelpStatusLabelID - Control ID of the label used to display help text• HelpHandleCssClass - CSS class applied to the help element used to display a dialog box describing the password• requirements• HelpHandlePosition - Positioning of the help handle element relative to the target control

ReorderList DemonstrationTo Do:

•

Have product idea - Figure out opportunities

•

Talk to customers - Make sure they want it

•

Design product - Figure out the features and architecture

•

Build prototype - Work out the issues

•

Test features - Use TDD and automated testing

•

Build production version - Make it fast and robust

•

Fix bugs - Make sure it works

•

Ship - Ship it!

• Please enter some text

ReorderList Description ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.

When bound to data, the ReorderList control will behave like many other databound controls. If the data you are displaying has a field that determines sort order (e.g. the select query is sorted by this column), and that column is of an integer type, the ReorderList can automatically perform reorders if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList (such as Arrays).

The ReorderList control is different than the other samples here because it is an ASP.NET server control that is aware of ASP.NET AJAX behaviors. Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.

The ReorderList can handle reorders in two ways, either via a callback or via a postback. For a callback, no page postback happens on a reorder. This is useful if the data is only to be ordered. If the data

items are to be deleted or edited, a full postback needs to occur to sync the server side state with the client side state. The PostbackOnReorder property enables this. ReorderList Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"

DataSourceID="ObjectDataSource1"

DragHandleAlignment="Left"

ItemInsertLocation="Beginning"

DataKeyField="ItemID"

SortOrderField="Priority"

AllowReorder="true">

<ItemTemplate>...</ItemTemplate>

<ReorderTemplate>...</ReorderTemplate>

<DragHandleTemplate>...</DragHandleTemplate>

<InsertItemTemplate>...</InsertItemTemplate>

</ajaxToolkit:ReorderList>

• DataSourceID - The DataSource to use to populate this control• DataKeyField - The primary key field for the data• SortOrderField - The field that represents the sort order of the items.• ItemInsertLocation - Determines where new items are inserted into the list, can be Beginning or End• DragHandleAlignment - Where the drag handle should be relative to the item row - can be "Top", "Bottom", "Left", or "Right"

• AllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is present• ItemTemplate - The template to display for items in the list• EditItemTemplate - The template do display for a row that is in edit mode• ReorderTemplate - The template to use to show the drop location when doing a reorder operation. This template is • not data bindable.• InsertItemTemplate - The template to show for adding new items to the list.• DragHandleTemplate - The template for the drag handle that the user clicks and drags to reorder items.• EmptyListTemplate - The template to show when the list has no data. This item is not data-bindable.• PostbackOnReorder - Determines if reorders initiate a postback or callback. To use any edit or delete functionality of

• a data-bound list, postbacks must be enabled.

SlideShow Demonstration

Blue Hills

Go Blue

SlideShow Description SlideShow is an extender that targets image controls. You can provide it with buttons to hit previous, next and play. You can configure the slideshow to play automatically on render, allow it loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a webservice. In the sample above we have provided you with a slideshow that plays automatically on render and loops around to the first picture if you hit next on the last picture and vice versa if you hit previous on the first picture. The slideshow transitions pictures after 3 seconds.

SlideShow Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"

TargetControlID="Image1"

SlideShowServiceMethod="GetSlides"

AutoPlay="true"

ImageTitleLabelID="imageTitle"

ImageDescriptionLabelID="imageDescription"

NextButtonID="nextButton"

PlayButtonText="Play"

StopButtonText="Stop"

PreviousButtonID="prevButton"

PlayButtonID="playButton"

Loop="true" />

• SlideShowServicePath - Path to the webservice that the extender will pull the images from.• SlideShowServiceMethod - The webservice method that will be called to supply images. The signature of the method • must match this:



public AjaxControlToolkit.Slide[] GetSlides() { ... }

Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/• ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey• of type string:



public AjaxControlToolkit.Slide[] GetSlides(string contextKey) { ... }

Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).

• NextButtonID - ID of the button that will allow you to see the next picture.• PlayButtonID - ID of the button that will allow you to play/stop the slideshow.• PreviousButtonID - ID of the button that will allow you to see the previous picture.• PlayButtonText - The text to be shown in the play button to play the slideshow.• StopButtonText - The text to be shown in the play button to stop the slideshow.• PlayInterval - Interval in milliseconds between slide transitions in play mode.• ImageTitleLabelID - ID of Label displaying current picture's title.• ImageDescriptionLabelID - ID of Label describing current picture.• Loop - Setting this to true will allow you to view images in a round-robin fashion.• AutoPlay - Setting this to true will play the slideshow automatically on render.

Slider Demonstration

Horizontal Slider ranging from -100 to +100 with 5 discrete values (5 steps), bound to a Label control. Changing the value will cause the Slider to trigger an update of the UpdatePanel that displays the current date and time.

0

Vertical Slider ranging from 0 to 100, bound to a TextBox. Clicking on the rail will cause the handle to slide with a nice animation effect.

Slider instance that is accessible. Its borders allow the slider's rail to be distinguished in high contrast mode. The TooltipText property on the slider's handle indicates the current value of the slider and what is actionable for the user when focus is set on that image. The value of the slider can be changed using the bound textbox so that it is completely usable without a mouse. Keyboard support for the Slider's handle is not in yet but will be available in the later Toolkit releases.

Slider instance using a decimal range from 0.1 to 1.0. 0.10

Slider Description The Slider extender allows to upgrade an asp:TextBox to a graphical slider that allows the user to choose a numeric value from a finite range. The Slider's orientation can be horizontal or vertical and it can also act as a "discrete" slider, allowing only a specified number of values within its range.

If the developer doesn't specify any parameters, the Slider is rendered with the default layout shown in the demonstration and its range of values goes from 0 to 100. The Slider's layout can be customized by providing CSS classes for the Slider's rail and handle. If handle animation is enabled, the handle slides to the specified point on the rail with a nice animation effect.

When a value is chosen using the Slider, it is automatically persisted during full or partial postbacks. The developer can continue to reference the asp:TextBox to get and set the Slider's value.

The Slider's value can be dynamically displayed in another asp:TextBox or an asp:Label. If a TextBox is used, the Slider's value can be updated through the bound TextBox.

By declaring the extended TextBox as a trigger for an UpdatePanel, the Slider can fire the update whenever the handle is released. By setting the RaiseChangeOnlyOnMouseUp to false, the update will be fired as soon as the Slider's value changes.

The TooltipText property allows to display some text when the mouse pointer hovers the slider's handle. A {0} placeholder in the text is replaced by the current value of the slider.

Slider Properties The controls above are initialized with this code. The italic properties are optional:

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"

TargetControlID="Slider1"

Minimum="-100"

Maximum="100"

BoundControlID="Slider1_BoundControl"

Steps="5" />

<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"

TargetControlID="Slider2"

BoundControlID="Slider2_BoundControl"

Orientation="Vertical"

EnableHandleAnimation="true" />

• Minimum - Minimum value allowed.• Maximum - Maximum value allowed.• Decimals - Number of decimal digits for the value.• Steps - Number of discrete values inside the slider's range.• Value - Current value of the slider• EnableHandleAnimation - Enable/disable the handle animation.• HandleAnimationDuration - Duration of the handle animation, in milliseconds.• RailCssClass - CSS class for the slider's rail.• HandleCssClass - CSS class for the slider's handle.

• HandleImageURL - URL of the image to display as the slider's handle.• Length - Width/height of a horizontal/vertical slider when the default layout is used.• BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value.• RaiseChangeOnlyOnMouseUp - If true, fires the change event on the extended TextBox only when the left mouse button is released.• TooltipText - Text to display in a tooltip when the handle is hovered. The {0} placeholder in the text is replaced with the current value of the slider.

Slider Tips • TextBox visibility. The asp:TextBox that the Slider is upgrading will be visible during the page loading, so it is usable if JavaScript is not enabled on the browser. Depending on your

requirements, you can prevent the asp:TextBox from being visible by setting its display mode to "none". • Inline - Block. While the TextBox is rendered as an inline element, the Slider will be rendered as a block element. Consider using floats or a table when designing that portion of layout.

The CSS inline-block display mode is not supported by Internet Explorer 6. • CSS. When using custom CSS classes for the Slider's rail and handle, it's recommended to specify positioning. The rail should have position:relative while the handle should have

position:absolute.If a CSS class for the slider's rail is provided, the developer can choose to provide a CSS class for the handle or the URL to an image to display as the handle.Borders should be added to a wrapping <div>.

Tabs DemonstrationThe following user profile is presented in Tab format. You can click on the tab and modify specific fields.

Toolkit User Profile: Signature and BioEmailControls

Signature:Bio:

Hit Save to cause a postback from an update panel inside the tab panel.

Show Controls Owned

Current Tab: Signature and Bio

Tabs Description TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well. Tabs Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:TabContainer runat="server"

OnClientActiveTabChanged="ClientFunction"

Height="150px">

<ajaxToolkit:TabPanel runat="server"

HeaderText="Signature and Bio"

<ContentTemplate>

...

</ContentTemplate>

/>

</ajaxToolkit:TabContainer>

TabContainer Properties • ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback• OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event• CssClass - A css class override used to define a custom look and feel for the tabs. See the Tabs Theming section for more details.• ActiveTabIndex - The first tab to show• Height - sets the height of the body of the tabs (does not include the TabPanel headers)• Width - sets the width of the body of the tabs• ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer

• TabStripPlacement - Whether to render the tabs on top of the container or below (Top, Bottom) TabPanel Properties • Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client.• OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.• HeaderText - The text to display in the Tab• HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header• ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body

Tabs Theming You can change the look and feel of Tabs using the Tabs CssClass property. Tabs has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\Tabs\Tabs.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Tab control can be styled accordingly. For example if the CssClass property was set to "CustomTabStyle" this is how the css to style the tab header would look:

.CustomTabStyle .ajax__tab_header {

font-family:verdana,tahoma,helvetica;

font-size:11px;

background:url(images/tab-line.gif) repeat-x bottom;

}

Tabs Css classes • .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer.• Child CSS classes:.ajax__tab_outer. • .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child• CSS classes: .ajax__tab_inner. • .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. • Child CSS classes:.ajax__tab_tab.

• .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.• .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.• .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer. • .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.

TextBoxWatermark DemonstrationFirst name: Last name:

Hello [blank] hgfh! TextBoxWatermark Description TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behavior. When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page. TextBoxWatermark Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"


WatermarkText="Type First Name Here"

WatermarkCssClass="watermarked" />

• TargetControlID - The ID of the TextBox to operate on• WatermarkText - The text to show when the control has no value• WatermarkCssClass - The CSS class to apply to the TextBox when it has no value (e.g. the watermark text is shown).

ToggleButton DemonstrationI like ASP.NETI like ASP.NET AJAX

[No response provided yet] ToggleButton Description ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected. ToggleButton Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"

TargetControlID="CheckBox1"

ImageWidth="19"

ImageHeight="19"

CheckedImageAlternateText="Check"

UncheckedImageAlternateText="UnCheck"

UncheckedImageUrl="ToggleButton_Unchecked.gif"

CheckedImageUrl="ToggleButton_Checked.gif" />

• TargetControlID - The ID of the CheckBox to modify• ImageHeight\ImageWidth - The height and width of the image• CheckedImageUrl - the URL of the image to show when the toggle button is in the checked state.• UncheckedImageUrl - the URL of the image to show when the toggle button is in the unchecked state. • DisabledCheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the checked state.• DisabledUncheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the unchecked state. • CheckedImageOverUrl - the URL of the image to show when the toggle button is in the checked state and the mouse is• over the button.

• UncheckedImageOverUrl - the URL of the image to show when the toggle button is in the unchecked state and the• mouse is over the button.• CheckedImageAlternateText - the alt text to show when the toggle button is in the checked state.• UncheckedImageAlternateText - the alt text to show when the toggle button is in the unchecked state.• CheckedImageOverAlternateText - the alt text to show when the toggle button is in the checked state and the mouse• is over the button.• UncheckedImageOverAlternateText - the alt text to show when the toggle button is in the unchecked state and the• mouse is over the button.• ImageHeight/ImageWidth - The height and width, respectively, of the image that will be displayed.

UpdatePanelAnimation Demonstration

9/28/2010 7:27:24 AM

Choose the effects, then press 'Update':FadeCollapseColor Background

UpdatePanelAnimation Description The UpdatePanelAnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It is used to play animations both while an UpdatePanel is updating and after it has finished updating.

It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).

The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle

movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference. UpdatePanelAnimation Properties The UpdatePanel animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

runat="server" TargetControlID="up">

<Animations>

<OnUpdating> ... </OnUpdating>

<OnUpdated> ... </OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

• TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target • of the animations)• OnUpdating - Generic animation played as when any UpdatePanel begins updating• OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel

• changed)

RoundedCorners Demonstration

ASP.NET AJAX

CornerRadius:None 2px 4px 6px 10px Corners:Top Left Top RightBottom Left Bottom Right Border Color:

None Black Red Aqua RoundedCorners Description The RoundedCorners extender applies rounded corners to existing elements. To accomplish this it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose the corners of the target panel that should be rounded by setting the Corners property on the extender to None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All. RoundedCorners Properties The control above is initialized with this code. The italic properties are optional.

<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"


Radius="6"

Corners="All" />

• TargetControlID - The ID of the button or link for this extender to operate on • Radius - The radius of the corners (and height of the added area). Default is 5.• Corners - The corners of the target panel that will be rounded (can be None, TopLeft, TopRight, BottomRight, BottomLeft

• , Top, Right, Bottom, Left, or All)

ValidatorCallout Demonstration

Name:Phone Number:

ValidatorCallout Description ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control. ValidatorCallout Properties The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ValidatorCalloutExtender

runat="Server"

ID="PNReqE"

TargetControlID="PNReq"

Width="350px"

HighlightCssClass="highlight"

WarningIconImageUrl="warning.gif"

CloseImageUrl="close.gif" />

• TargetControlID - The ID of the Validator to extend• Width - The width of the callout• CssClass - Name of the CSS class used to style the ValidatorCallout. See the ValidatorCallout Theming section for more• information. • HighlightCssClass - A CssClass to apply to the invalid field• WarningIconImageUrl - The path to a custom warning icon image• CloseImageUrl - The path to a custom close image• Animations - Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference

• OnShow - The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.

• OnHide - The OnHide animation will be played each time the validation popup is hidden.ValidatorCallout Known Issues The callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation. Even after a post-back the callout will display when the form is re-validated when a postback is attempted again. ValidatorCallout Theming You can change the look and feel of the ValidatorCallout using the ValidatorCallout CssClass property. The ValidatorCallout has a predefined set of CSS classes that can be overridden. It has a default style

which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\

ValidatorCallout\ValidatorCallout.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ValidatorCallout control can be styled accordingly. For example, if the CssClass property was set to "CustomValidatorCalloutStyle", this is how the css to style the border and background color would look:

.CustomValidatorCalloutStyle div,

.CustomValidatorCalloutStyle td {

border:solid 1px blue; background-color: #ADD8E6;

}

ValidatorCallout Css classes • .ajax__validatorcallout_popup_table: The popup table.• .ajax__validatorcallout_popup_table_row: The popup table row.• .ajax__validatorcallout_callout_cell: The callout cell.• .ajax__validatorcallout_callout_table: The table in the callout cell.• .ajax__validatorcallout_callout_table_row: The callout table row.• .ajax__validatorcallout_error_message_cell: The error message cell. • .ajax__validatorcallout_icon_cell: The warning icon cell.• .ajax__validatorcallout_close_button_cell: The close button cell. • .ajax__validatorcallout_arrow_cell: The arror cell.• .ajax__validatorcallout_innerdiv: Inner div of a cell. Used in the close button cell and the arrow cell.

•

Ajax

Documents

Transcript of Ajax