1.1 How do I get the latest version of the Toolkit? [top]
Right now we're not working with specific release dates. We hope to keep a very rapid schedule of releasing the ASP.NET AJAX Control Toolkit and provide refreshes approximately once a month that contain new controls, bug fixes, etc. We are moving towards
a fully-transparent development model hosted on
CodePlex.com, where the full source code and daily checkins are available for viewing or download. Now that we are fully hosted on CodePlex, we are publishing regular "Last Known Good" builds on a frequent basis (about every 1-2 weeks), and more-tested
"releases" less frequently (about every month). You can check for the latest release
here.
The installation process for the ASP.NET AJAX Control Toolkit is very simple. It unzips the files into a directory you specify and then launches the local web server to start the sample website. If you get this far and have problems using the Toolkit, make
sure you properly
setup your environment. If you've having other problems, please post them in the forum and we'll help you work through them.
When using the Toolkit, you may find that control XXX doesn't work property under browser YYY. While these early releases have not worked perfectly in all browsers, we hope to eventually provide some level of support for each control in all browsers that
ASP.NET AJAX targets. Currently ASP.NET AJAX is planning to support IE, Firefox, and Safari.
2.3 Can I use your scripts if I'm not using ASP.NET? [top]
Yes, so long as the control doesn't require any of the server side code to function. Most of the controls only use server side code to automatically attach themselves to server controls in the page. A few other controls, notably ReoderList, are actually
implemented as server controls since they do a lot of their work on the server and would not trivially port to other platforms. All of the scripts require that you're running on top of ASP.NET AJAX though. Shanku Niyogi has posted an example of
using ASP.NET AJAX with PHP, for those who would like an example of running ASP.NET AJAX outside of ASP.NET.
The current version of the Toolkit only ships with sample code in C#. Note that the Visual Studio templates that ship with the Toolkit are available in C# and VB.NET.
We have chosen to write the Toolkit itself in C#, as well as the accompanying sample pages. However, in most cases the majority of the code is actually in JavaScript with a small layer of (usually) very simple C# or VB.NET code.
If you are a VB.NET developer and are having difficulty understanding the C# samples, please don't hesitate to post to the forums and we'll be glad to help you.
2.5 Target control with ID 'XYZ' could not be found for extender 'ABC' [top]
An extender must be in the same
NamingContainer as the control it is targetting. This error is especially common when databinding. The easiest way to resolve this is by moving the extender into the same naming container as the control. For more advanced scenarios though, you can handle
the ResolveControlID event (previously called ResolveTargetControlID) which allows you to supply a reference to any control on the page. See the
extender base classes documentation for more details, or the ExtenderBase.cs automated test for example code.
2.6 Why do I get this error: "Sys.InvalidOperationException: Two components with the same id '****' can't be added to the application"? [top]
You may get this error if there is more than one Extender with identical BehaviorID existing on the page.
All components on the page are maintained in an internal array. When a new component is going to be added, its ID (which is the exact value of BehaviorID) will be checked against the array to see if it's already occupied. This exception will be thrown if it's
already there.
This usually happens when working with Data presentation controls (GridView, DataList, etc.). If there is an Extender with specified BehaviorID sits in the template, multiple instances of it will be generated. So, the exception occurs.
Extender also has an object model on client side. We are able to call method on the object that represents it to get desired behavior, for example, we can call show method to make a modalPopupExtender visible.
The key is we need to get a reference to this object. AJAX library has already provided a $find function to achieve this. First, we need to assign a BehaviorID to the extender that we wish to manipulate on server side. Then, on client side, we can get it with
$find(“behaviorid”).
After that, we can call any method on the object to achieve our requirement.
2.9 Can I change the value of a property dynamically on the client? [top]
Yes, most of extenders in AJAX ControlToolkit have already provided a set of methods that allow us to manipulate.
We can download the source code of ControlToolkit to find out what functions have been defined in an Extender by looking into its js file. Usually, we have following conversions:
• Method starts with get_ means it return a property of the extender.
• Method starts with set_ means it can be used to set a property's value of the extender.
• Method starts with add_ means it can be used to add an event handler to the extender, and it should have a parameter of a function defined by you. For example, if you call add_showing to add an event handler to a ModalPopupExtender, your function will be
called before the popup shows.
• Method starts with remove_ means it can be used to remove a registered event handler.
• Method starts with underline ("_") means it's a protected or private method, and it's not recommended to be used directly.
2.10 How to get/set a Control’s position on client side? [top]
Microsoft AJAX Library provides a bunch of facilities to manipulate the HTML element on client side, including getting and setting the position of an element.
For example:
To get a Panel's current position on the client side, we can use $common.getLocation(DOM Element) function.
//Get DOM Element with $get() function.
var el = $get('<%=Panel1.ClientID%>');
//Get its position.
var newLocation = $common.getLocation(el);
To set its position:
//Create the new position. var newLocation = new Sys.UI.Point(x-position,y-position); //Move the Panel to the destination. $common.setLocation(Panel, newLocation);
Sometimes, the control is associated with an Extender and the Extender contains public method to set the control's position. For example, if a Panel is associated with a DragPanelExtender. We also can use $find('DragPanel.BehaviorID').set_location(newLocation)
A lot of the HTML input controls (like <select>) do not work with z-Ordering because of how the browser renders them. This causes some controls, like ModalPopup, to have input controls that appear on top of their dynamically positioned content. For more information, please see http://support.microsoft.com/default.aspx?scid=KB;EN-US;Q177378.
2.12 Scripts don't load when the extender targets a control in an EditItemTemplate [top]
When using an extender that targets a control inside the EditItemTemplate of a data-bound control in conjunction with an UpdatePanel, it's possible that you may see an "Assertion Failed: Unrecognized tag AtlasControlExtender:MyExtender" error message. To work around this, just force the scripts to download by placing an extender with no extender properties elsewhere in the page. For example, add <ajaxtoolkit:MyExtenderid="me"runat="server/>.
You can add static page methods to an ASP.NET page and qualify them as Web methods. You can then call these methods from script as if they were part of a Web service, but without creating a separate .asmx file. To create Web methods in a page, import the System.Web.Services namespace and add a WebMethodAttribute attribute to each static method that you want to expose.
To be able to call static page methods as Web methods, you must set the EnablePageMethods attribute of the ScriptManager control to true.
For example:
[WebMethod] public static DateTime GetCurrentTime() { return DateTime.UtcNow; }
Use PageMethods.MethodName to call the existing PageMethod.
For example,
<script language="javascript" type="text/javascript"> function getCurrentTime(){ PageMethods.GetCurrentTime(onSucceeded); } function onSucceeded(returnedValue){ } </script>
3.2 I have a UserControl and my PageMethod does not work? [top]
As the answer above indicates, PageMethod must be defined in a page.
When the EnabledPageMethod property of the ScriptManager instance on the page is set to true, it'll inject script proxy for each web method defined in the page that the ScriptManager lives in. The script proxy can't be generated if it's defined in a control.
In order for a Web service to be accessed from script, it must be an .asmx Web service whose Web service class is qualified with the ScriptServiceAttribute attribute. Individual methods to be called from script must be qualified with the WebMethodAttribute attribute. For example,
[ScriptService] public class SimpleWebService : System.Web.Services.WebService { [WebMethod] public string EchoInput(String input) { // Method code goes here. } }
Add reference to the existing WebService in ScriptManager. Like this,
You must configure the Web application to support calling Web services from script. In the Web.config file for the application, you must register the ScriptHandlerFactory HTTP handler, which processes calls made from script to .asmx Web services. For Web service calls that are not issued from ASP.NET AJAX script, the handler delegates the call to the default handler. The following example shows the Web.config element for adding the handler. For example,
If your Web Service is called by a AJAX Control Toolkit control , please make sure the parameters should be strictly same with its definition. For example, if you are using AutoComplete, you can do like the below.
[WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey){ } or [WebMethod] public string[] GetCompletionList(string prefixText, int count){ }
3.4 How can I pass additional data to my WebService? [top]
Extender allows the Web Method that it consumes to provide an optional parameter for passing additional data into it. It’s contextKey.
What we need to do is set the ContextKey property of the Extender to desired value, and then this value can be retrieved from the web method via contextKey parameter which should be the last one of the parameter list.
We can use $addHandler to attach a DOM event handler. For example:
<script type="text/javascript"> function pageLoad() { var ddl=$get("DropDownList1"); $addHandler(ddl, "change", onChange); }
function onChange(sender) { alert('aaa'); } </script>
4.2 How do I attach to an event raised by a behavior? [top]
Most of extenders have already provided functions for attaching event handler. We need to get the reference to the component first with $find method. Then invoke a corresponding function to attach an event handler. For example, below code shows how to add a hiding event handler to a modalPopup.
var modalPopup = $find('mpe'); modalPopup.add_hiding(onHiding);
function onHiding(sender, args){ }
It’s possible to find out what events are supported by an Extender by looking into its source code. Please also refer to question “Can I change the value of a property dynamically on the client?”
We can use $removeHandler or $clearHandler function to achieve this. For example:
var ddl=$get("DropDownList1");
$removeHandler(ddl, "change", onChange);
5. Localization
5.1 When I reference the no-source Toolkit dll it pulls a lot more dlls and places them in the bin folder of my website, why? [top]
Those additional dlls in different folders like “zh-CHS” are satellite assemblies that contain localized resources for the culture that the folder’s name represents. Resources within them will be automatically used if the site or a page’s UICulture is set to a particular value and the ScriptManager’s EnableScriptLocalization property is set to ture.
5.2 The Calendar control on my webpage does not seem to be showing the “Today” string in the locale of my browser, why? [top]
We do need to follow the steps described in the question above. And make sure satellite assemblies are in the bin folder of the web site.
6. ModalPopup
6.1 My controls briefly appear when the page loads before being hidden (specifically with CollapsiblePanelExtender, PopupControlExtender, etc.) [top]
If you're using the ASP.NET AJAX Control Toolkit you may notice that when you load the page a control that you wish to be hidden is visible and then disappears (most frequently observed when people try to use CollapsiblePanel and expect it to be collapsed initially or have a PopupControl that should be hidden until a user clicks something). This occurs because of the delay between when the page first renders and when the JavaScript is run to modify it. In order to avoid this problem altogether, we recommend you have all of the controls positioned and styled as you would expect them to look after the script has initialized them.
For example, with CollapsiblePanel you should set its Height="0px"(or whatever your CollapsedSize property is – in this case 0) and add set it to not overflow using style="overflow: hidden;". If you have a PopupControl you should set it's visibility to false using style="visibility: false;". Do not use the ASP.NET property Visible="false" because this will prevent your control from rendering on the client.
6.2 How do I create a ModalPopup programmatically? [top]
There are two ways to create it programmatically, on server side and on client side.
Server side
To create it on server side, we need to create an instance of ModalPopupExtender class, add it to the page, and set its properties accordingly. Below is the relevant code snippet:
As a matter of fact, we can find out the code above by viewing the source of the generated page.
Generally, these two approaches can be applied to most of extender controls.
6.3 What if multiple TargetControls for the ModalPopup? [top]
A ModalPopup doesn't allow this natively, but it’s still possible to achieve by manipulating the modalpopup control with javascript directly. Let's say there are two buttons(btnA, btnB) to be set as the target control.
1. We set btnA to be the target control with modalpopup's TargetControlID. 2. Assign a behaviorID to modalpopup. 3. Attach the following javascript function as the click event handler to btnB.
function onClick() { $find(“behaviorIDofModalPopup”).show(); }
6.4 How do I show the ModalPopup from the server? [top]
It’s quite straightforward by calling ModapPopup’s Show method on server side.
6.5 How to keep ModalPopupExtender after full PostBack? [top]
When a ModalPopupExtender is already opened, it will be closed after a full PostBack. This’s because its client side state(opened or hidden) isn’t maintained automatically. As a result, it will always be hidden initially after a full PostBack. To solve this, we have following options:
• Avoid using full PostBack by putting an UpdatePanel inside the ModalPopup. • Save and restore its state manually on client side.
Below are two examples for each option:
Option 1:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. Add a onShown event handler to the ModalPopupExtender. 2. Add a onHidden event handler to the ModalPopupExtender. 3. Set the HiddenField’s value to “shown” or “hidden” in the above functions accordingly. 4. In pageLoad function, call show function if the HiddenField’s value is "shown".
Here is the essential code snippet.
<script type="text/javascript">
function pageLoad() { var mpe = $find("mpe"); mpe.add_shown(onShown); mpe.add_hidden(onHidden);
6.6 How do I show the ModalPopup during an UpdatePanel refresh? [top]
We can register two methods that will be called when updating start and updating end respectively. Then show and hide the modalpopup inside them.
Below script function can be used to achieve this:
<script type="text/javascript">
Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); if (!prm.get_isInAsyncPostBack()) { prm.add_initializeRequest(initRequest); prm.add_endRequest(endRequest); } }
function initRequest(sender, args) { var pop = $find("ModalPopupExtender1"); pop.show(); }
function endRequest(sender, args) { var pop = $find("ModalPopupExtender1"); pop.hide(); }
</script>
6.7 Why the ModalPopupExtender’s OK button doesn’t fire its server side click event? [top]
That’s because ModalPopupExtender prevents it from causing a postback, and just hide the popup. To solve it, don’t specify the button as OKControl for the ModalPopupExtender.
7. Cascading Dropdown
7.1 How do I use Cascading DropDown with other data sources? [top]
Although the sample for the Cascading Drop Down extender works with XML data, it can just as easily work with any other data source such as a database or active directory. We have provided an example in the walkthroughs that discusses how to do this with a database. If you look carefully at the sample, you'll see that all it really does is call a webservice that returns an array of CascadingDropDownNameValue objects. To work with other data sources, just change the implementation of this web method to iterate over your data, build up an array of CascadingDropDownNameValue objects from it, and return this array.
If you're having problems getting this to work, be sure that the parameters of your web methods are exactly the same as in the sample/walkthrough (a requirement of ASP.NET AJAX) and that you're returning and empty array of objects for the case where there are no results.
When using the CascadingDropDown, you should set EnableEventValidation="false" on the Page directive. If this is not set, the child dropdown lists will not load their values. See this thread for an explanation.
An alternative option is you can use ClientScriptManager’s RegisterForEventValidation method to register possible items in advance.
7.3 Getting the text of the selected item in a CascadingDropDown [top]
Since the CascadingDropDown populates its lists dynamically, you cannot check the SelectedItem.Text property on the server in the current release. This thread suggests a workaround.
8.1 How to manipulate TabControl with JavaScript? [top]
Tab pages in TabContainer can be manipulated on client side directly.
1. Get a reference to the component on client side via $find function. 2. Invoke a corresponding function on the component to manipulate it.
For instance:
var tab = $find(“tabContainer’s ClientID”); tab.set_activeTabIndex(1); // active the second tab panel tab.getFirstTab().set_enabled(false); // disable the first panel
All of the functions defined in the TabContainer control can be found in the Tabs.js file of AJAX control toolkit’s source code.
11.1 My DragPanels overlap and don't remain where they are dropped? [top]
One of the first things that the DragPanel does to your target control is get its current position, set absolute positioning, and then move the control to its original position. When you do this, it causes any controls after it to slide into the empty space left by making it absolutely positioned. This can also cause multiple DragPanels to overlap. We recommend that you place controls that you plan to extend with DragPanels inside divs of the same size that will preserve your layout once the DragPanel gets wired up.
Another problem that people have has to do with drag panels not remaining still when they are dropped past the end of the document's content. This is a known issue with ASP.NET AJAX and some of the threads below suggest various workarounds.
We can call the Extender’s dispose() function to disable it. We can call initialize() function to enable it.Here is a sample to disable and enable a DropDownExtender.
function setDisabled() { $find("DropDownExtender’s BehaviorID").dispose(); } function setEnabled() { $create(AjaxControlToolkit.DropDownBehavior, {"dropDownControl":$get("DropPanel"),"dynamicServicePath":"/ControlToolkitTest/DropDown/Disabled.aspx","id":"DDEBID"}, null, null, $get("TextLabel")); }
13.1 How to change the Rating Control’s title property? [top]
Sometimes, we want to show characters instead of digits when the mouse is moving to the star. How can we achieve this? We can find the elements and change its title property. For example,
<AJAXToolkit:Rating ID="Rating1" BehaviorID="RatingBehavior1" runat="server" CurrentRating="1" MaxRating="3" ReadOnly="false" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" Tag="99" > </AJAXToolkit:Rating> <script type="text/javascript" language="javascript"> function pageLoad() { //change its title var RatingID = "<%=Rating1.ClientID %>"; for(i=0;i<$find("RatingBehavior1").get_MaxRating();i++) { switch(i) { case 0: $get(RatingID+"_Star_"+(i+1).toString()).title ="Bad"; break; case 1: $get(RatingID+"_Star_"+(i+1).toString()).title ="OK"; break; case 2: $get(RatingID+"_Star_"+(i+1).toString()).title ="Excelent";break; default: break; } } } </script>
It doesn’t support postback currently. We can force it to show manually with the following steps:
1. Add a HiddenField to maintain the state of ValidatorCallout, its initial value is “false”. 2. Set its value to true if server side validation fails. 3. In client side pageLoad function, check HiddenField’s value and show ValidatorCallout accordingly.
Below is a sample:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
16.2
How do I get my own control included in the ASP.NET AJAX Control Toolkit? [top]
As you may have noticed in Shawn's
welcome message, we are actively working on making the ASP.NET AJAX Control Toolkit a shared source project with contributions from the community. We're still working
out all the details, but we'll be sure to let you know when/how/where this next step of the Toolkit will take off. In the meantime, if you have any amazing controls or fabulous insights you can post them in the forums to share with your fellow developers.
16.3 I don't see my changes to the JavaScript files in the provided project or a project created from the templates [top]
To make deployment of your controls easier, all the JavaScript files are embedded as web resources
by default (via the
WebResourceAttribute in a region at the top of your extender). This means that they're compiled into the binary with the rest of your source and delivered to the
client indirectly. If you make a change to the script, you need to rebuild the project for the change to be seen on the client when testing. To make it easier to debug your scripts without constantly rebuilding, check out the section "Easily modifying
and debugging scripts" of Other Neat Stuff for information about using the
ScriptPath property.
16.4 I get an "Assertion Failed: Unrecognized Tag" error with my new control [top]
This error message appears for one or more of the following reasons:
• You didn't make your script an Embedded Resource (select the file, and set "Build Action" to "Embedded Resource" in the property window). This
happens by default when you create an ASP.NET AJAX Control Project, but needs to be done manually when new controls are added to the project. • The
WebResourceAttribute at the top of your extender doesn't correctly point at your JavaScript file's resource name. If you're unsure what the proper resource name is, you can easily
find out by running ILDASM or Reflector and finding your script in the manifest resources. • The values provided in the
[ClientScriptResource("prefix",
"tag", typeof(MyControlExtender),
"Same.Value.As.WebResourceAttribute.Above.js")] attribute on your extender don't match either the prefix and tag names provided at the bottom
of your script via Sys.TypeDescriptor.addType('prefix',
'tag', MyCompany.MyControl); or the resource name in the
WebResourceAttribute above.
FAQ Publisher
0 Points
12 Posts
ASP.NET AJAX Control Toolkit FAQ
May 13, 2009 02:53 AM|LINK
1. Toolkit Binaries
1.1 How do I get the latest version of the Toolkit?
1.2 Installation Errors
1.3 How do I update existing sites using the Toolkit?
2. Basic Usage
2.1 Browser compatibility
2.2 Dynamically creating controls
2.3 Can I use your scripts if I'm not using ASP.NET?
2.4 Why aren't the samples in VB.NET?
2.5 Target control with ID 'XYZ' could not be found for extender ‘ABC’
2.6 Why do I get this error: “Sys.InvalidOperationException: Two components with the same id ‘****’ can’t be added to the application”?
2.7 How do I force a PostBack from my JavaScript?
2.8 Manipulate extender on the client
2.9 Can I change the value of a property dynamically on the client?
2.10 How to get/set a Control’s position on client side?
2.11 z-Order problems
2.12 Scripts don't load when the extender targets a control in an EditItemTemplate
3. PageMethods and Web Service
3.1 My PageMethod does not work?
3.2 I have a UserControl and my PageMethod does not work?
3.3 My WebService does not work, why?
3.4 How can I pass additional data to my WebService?
3.5 How to change contextKey on client side?
4. Events
4.1 How do I attach to a DOM event?
4.2 How do I attach to an event raised by a behavior?
4.3 How do I cancel an event?
5. Localization
5.1 When I reference the no-source Toolkit dll it pulls a lot more dlls and places them in the bin folder of my website, why?
5.2 The Calendar control on my webpage does not seem to be showing the “Today” string in the locale of my browser, why?
6. ModalPopup
6.1 My controls briefly appear when the page loads before being hidden (specifically with CollapsiblePanelExtender, PopupControlExtender, etc.)
6.2 How do I create a ModalPopup programmatically?
6.3 What if multiple TargetControls for the ModalPopup?
6.4 How do I show the ModalPopup from the server?
6.5 How to keep ModalPopupExtender after full PostBack?
6.6 How do I show the ModalPopup during an UpdatePanel refresh?
6.7 Why the OK button’s server side click event doesn’t fire?
7. Cascading Dropdown
7.1 How do I use Cascading Drop Down with other data sources?
7.2 CascadingDropDown not populating
7.3 Getting the text of the selected item in a CascadingDropDown
8. TabContainer
8.1 How to manipulate TabControl with JavaScript?
9. Accordion
9.1 Add an Accordion Pane on client side?
9.2 How to expand Accordion when moving the mouse over its header?
10. Calendar
10.1 How to change the CalendarExtender’s display mode?
11. DragPanel
11.1 My DragPanels overlap and don't remain where they are dropped?
12. Slider
12.1 How to disable/enable the SliderControl?
13. Rating
13.1 How to change the Rating Control’s title property?
14. Validators
14.1 Why asp.net validators not working in the UpdatePanel?
14.2 ValidatorCallout does not work in a postback?
15. Animation
15.1 Scripting Animations from the Ms Ajax AnimationExtender
15.2 How to: Re-use Animation Extenders in a page
15.3 MS AJAX AnimationExtender : How Many Ways Do I Play thee?
15.4 How do I add animation to the SlideShow?
16. Custom Extender
16.1 Contributing to the Toolkit
16.2 How do I get my own control included in the ASP.NET AJAX Control Toolkit?
16.3 I don't see my changes to the JavaScript files in the provided project or a project created from the templates
16.4 I get an "Assertion Failed: Unrecognized Tag" error with my new control
1. Toolkit Binaries
1.1 How do I get the latest version of the Toolkit? [top]
Right now we're not working with specific release dates. We hope to keep a very rapid schedule of releasing the ASP.NET AJAX Control Toolkit and provide refreshes approximately once a month that contain new controls, bug fixes, etc. We are moving towards a fully-transparent development model hosted on CodePlex.com, where the full source code and daily checkins are available for viewing or download. Now that we are fully hosted on CodePlex, we are publishing regular "Last Known Good" builds on a frequent basis (about every 1-2 weeks), and more-tested "releases" less frequently (about every month). You can check for the latest release here.
1.2 Installation Errors [top]
The installation process for the ASP.NET AJAX Control Toolkit is very simple. It unzips the files into a directory you specify and then launches the local web server to start the sample website. If you get this far and have problems using the Toolkit, make sure you properly setup your environment. If you've having other problems, please post them in the forum and we'll help you work through them.
Related threads:
error installing
Can't install the toolkit
ASP.NET AJAX Control Toolkit
1.3 How do I update existing sites using the Toolkit? [top]
In most cases, Toolkit can be updated seamlessly by replacing an older version assembly with a newer one.
2. Basic Usage
2.1 Browser compatibility [top]
When using the Toolkit, you may find that control XXX doesn't work property under browser YYY. While these early releases have not worked perfectly in all browsers, we hope to eventually provide some level of support for each control in all browsers that ASP.NET AJAX targets. Currently ASP.NET AJAX is planning to support IE, Firefox, and Safari.
Related threads:
FYI: how cross browser are the Toolkit components
I tried the toolkit from your sample site with ...
2.2 Dynamically creating controls [top]
Please refer to question “How do I create a ModalPopup Programmatically?”
Related threads:
Creating Atlas Controls
Creating DragPanel dynamicly
Collapsible Panel Behaviour
Dynamically Create Controls and Extenders
2.3 Can I use your scripts if I'm not using ASP.NET? [top]
Yes, so long as the control doesn't require any of the server side code to function. Most of the controls only use server side code to automatically attach themselves to server controls in the page. A few other controls, notably ReoderList, are actually implemented as server controls since they do a lot of their work on the server and would not trivially port to other platforms. All of the scripts require that you're running on top of ASP.NET AJAX though. Shanku Niyogi has posted an example of using ASP.NET AJAX with PHP, for those who would like an example of running ASP.NET AJAX outside of ASP.NET.
2.4 Why aren't the samples in VB.NET? [top]
The current version of the Toolkit only ships with sample code in C#. Note that the Visual Studio templates that ship with the Toolkit are available in C# and VB.NET.
We have chosen to write the Toolkit itself in C#, as well as the accompanying sample pages. However, in most cases the majority of the code is actually in JavaScript with a small layer of (usually) very simple C# or VB.NET code.
If you are a VB.NET developer and are having difficulty understanding the C# samples, please don't hesitate to post to the forums and we'll be glad to help you.
Related threads:
Cascading Dropdown List VB error
CascadingDropDowns in VB
CascadingDropDown Problems......
2.5 Target control with ID 'XYZ' could not be found for extender 'ABC' [top]
An extender must be in the same NamingContainer as the control it is targetting. This error is especially common when databinding. The easiest way to resolve this is by moving the extender into the same naming container as the control. For more advanced scenarios though, you can handle the ResolveControlID event (previously called ResolveTargetControlID) which allows you to supply a reference to any control on the page. See the extender base classes documentation for more details, or the ExtenderBase.cs automated test for example code.
Related threads:
Target control with ID 'TextBox1' could not be found for extender !?!
Error using the PopupControlExtender control when referencing controls that are contained within another control...
Multiple PopupControlProperties?
2.6 Why do I get this error: "Sys.InvalidOperationException: Two components with the same id '****' can't be added to the application"? [top]
You may get this error if there is more than one Extender with identical BehaviorID existing on the page.
All components on the page are maintained in an internal array. When a new component is going to be added, its ID (which is the exact value of BehaviorID) will be checked against the array to see if it's already occupied. This exception will be thrown if it's already there.
This usually happens when working with Data presentation controls (GridView, DataList, etc.). If there is an Extender with specified BehaviorID sits in the template, multiple instances of it will be generated. So, the exception occurs.
Related threads:
http://forums.asp.net/t/1127745.aspx
2.7 How do I force a PostBack from my JavaScript? [top]
This thread describes in detail how to perform a PostBack from your JavaScript, similar to the way ReorderList does it.
2.8 Manipulate extender on the client [top]
Extender also has an object model on client side. We are able to call method on the object that represents it to get desired behavior, for example, we can call show method to make a modalPopupExtender visible.
The key is we need to get a reference to this object. AJAX library has already provided a $find function to achieve this. First, we need to assign a BehaviorID to the extender that we wish to manipulate on server side. Then, on client side, we can get it with $find(“behaviorid”).
After that, we can call any method on the object to achieve our requirement.
Related threads:
Referencing CollapsiblePanelExtender in jscript
cascadingdropdown add client-side clear label how?
2.9 Can I change the value of a property dynamically on the client? [top]
Yes, most of extenders in AJAX ControlToolkit have already provided a set of methods that allow us to manipulate.
We can download the source code of ControlToolkit to find out what functions have been defined in an Extender by looking into its js file. Usually, we have following conversions:
• Method starts with get_ means it return a property of the extender.
• Method starts with set_ means it can be used to set a property's value of the extender.
• Method starts with add_ means it can be used to add an event handler to the extender, and it should have a parameter of a function defined by you. For example, if you call add_showing to add an event handler to a ModalPopupExtender, your function will be called before the popup shows.
• Method starts with remove_ means it can be used to remove a registered event handler.
• Method starts with underline ("_") means it's a protected or private method, and it's not recommended to be used directly.
2.10 How to get/set a Control’s position on client side? [top]
Microsoft AJAX Library provides a bunch of facilities to manipulate the HTML element on client side, including getting and setting the position of an element.
For example:
To get a Panel's current position on the client side, we can use $common.getLocation(DOM Element) function.
To set its position:
Sometimes, the control is associated with an Extender and the Extender contains public method to set the control's position. For example, if a Panel is associated with a DragPanelExtender. We also can use $find('DragPanel.BehaviorID').set_location(newLocation)
Related threads:
http://forums.asp.net/t/1154072.aspx
2.11 z-Order problems [top]
A lot of the HTML input controls (like <select>) do not work with z-Ordering because of how the browser renders them. This causes some controls, like ModalPopup, to have input controls that appear on top of their dynamically positioned content. For more information, please see http://support.microsoft.com/default.aspx?scid=KB;EN-US;Q177378.
Related threads:
ListBox and DragPanelExtender
ModalPopup and <SELECT>
2.12 Scripts don't load when the extender targets a control in an EditItemTemplate [top]
When using an extender that targets a control inside the EditItemTemplate of a data-bound control in conjunction with an UpdatePanel, it's possible that you may see an "Assertion Failed: Unrecognized tag AtlasControlExtender:MyExtender" error message. To work around this, just force the scripts to download by placing an extender with no extender properties elsewhere in the page. For example, add <ajaxtoolkit:MyExtender id="me" runat="server />.
Related threads:
Assertion Failed: Unrecognized tag AtlasControlExtender:ValidationScript
BUG - NumericUpDownExtender in Gridview EditItemTemplate
3. PageMethods and Web Service
3.1 My PageMethod does not work? [top]
You can add static page methods to an ASP.NET page and qualify them as Web methods. You can then call these methods from script as if they were part of a Web service, but without creating a separate .asmx file. To create Web methods in a page, import the System.Web.Services namespace and add a WebMethodAttribute attribute to each static method that you want to expose.
To be able to call static page methods as Web methods, you must set the EnablePageMethods attribute of the ScriptManager control to true.
For example:
Use PageMethods.MethodName to call the existing PageMethod.
For example,
For more information, please visit here. http://asp.net/ajax/documentation/live/tutorials/ExposingWebServicesToAJAXTutorial.aspx
3.2 I have a UserControl and my PageMethod does not work? [top]
As the answer above indicates, PageMethod must be defined in a page.
When the EnabledPageMethod property of the ScriptManager instance on the page is set to true, it'll inject script proxy for each web method defined in the page that the ScriptManager lives in. The script proxy can't be generated if it's defined in a control.
Related threads:
http://forums.asp.net/t/1206596.aspx
3.3 My WebService does not work, why? [top]
In order for a Web service to be accessed from script, it must be an .asmx Web service whose Web service class is qualified with the ScriptServiceAttribute attribute. Individual methods to be called from script must be qualified with the WebMethodAttribute attribute. For example,
Add reference to the existing WebService in ScriptManager. Like this,
Please make sure that the path is correct.
You must configure the Web application to support calling Web services from script. In the Web.config file for the application, you must register the ScriptHandlerFactory HTTP handler, which processes calls made from script to .asmx Web services. For Web service calls that are not issued from ASP.NET AJAX script, the handler delegates the call to the default handler. The following example shows the Web.config element for adding the handler. For example,
If your Web Service is called by a AJAX Control Toolkit control , please make sure the parameters should be strictly same with its definition. For example, if you are using AutoComplete, you can do like the below.
3.4 How can I pass additional data to my WebService? [top]
Extender allows the Web Method that it consumes to provide an optional parameter for passing additional data into it. It’s contextKey.
What we need to do is set the ContextKey property of the Extender to desired value, and then this value can be retrieved from the web method via contextKey parameter which should be the last one of the parameter list.
Related threads:
http://forums.asp.net/t/1130558.aspx
3.5 How to change contextKey on client side? [top]
Extenders provide a set_contextKey method on client side that enables changing contextKey on client side. For example:
Related thread:
http://forums.asp.net/t/1155780.aspx
4. Events
4.1 How do I attach to a DOM event? [top]
We can use $addHandler to attach a DOM event handler. For example:
4.2 How do I attach to an event raised by a behavior? [top]
Most of extenders have already provided functions for attaching event handler. We need to get the reference to the component first with $find method. Then invoke a corresponding function to attach an event handler. For example, below code shows how to add a hiding event handler to a modalPopup.
It’s possible to find out what events are supported by an Extender by looking into its source code. Please also refer to question “Can I change the value of a property dynamically on the client?”
4.3 How do I cancel an event? [top]
We can use $removeHandler or $clearHandler function to achieve this. For example:
5. Localization
5.1 When I reference the no-source Toolkit dll it pulls a lot more dlls and places them in the bin folder of my website, why? [top]
Those additional dlls in different folders like “zh-CHS” are satellite assemblies that contain localized resources for the culture that the folder’s name represents. Resources within them will be automatically used if the site or a page’s UICulture is set to a particular value and the ScriptManager’s EnableScriptLocalization property is set to ture.
This wiki explains localization in detail.
5.2 The Calendar control on my webpage does not seem to be showing the “Today” string in the locale of my browser, why? [top]
We do need to follow the steps described in the question above. And make sure satellite assemblies are in the bin folder of the web site.
6. ModalPopup
6.1 My controls briefly appear when the page loads before being hidden (specifically with CollapsiblePanelExtender, PopupControlExtender, etc.) [top]
If you're using the ASP.NET AJAX Control Toolkit you may notice that when you load the page a control that you wish to be hidden is visible and then disappears (most frequently observed when people try to use CollapsiblePanel and expect it to be collapsed initially or have a PopupControl that should be hidden until a user clicks something). This occurs because of the delay between when the page first renders and when the JavaScript is run to modify it. In order to avoid this problem altogether, we recommend you have all of the controls positioned and styled as you would expect them to look after the script has initialized them.
For example, with CollapsiblePanel you should set its Height="0px"(or whatever your CollapsedSize property is – in this case 0) and add set it to not overflow using style="overflow: hidden;". If you have a PopupControl you should set it's visibility to false using style="visibility: false;". Do not use the ASP.NET property Visible="false" because this will prevent your control from rendering on the client.
Related threads:
Popup Exender panel flickers
CollapsiblePanelExtender issue
Slow Loading HoverMenu
DragPanelExtender initially non-visible
6.2 How do I create a ModalPopup programmatically? [top]
There are two ways to create it programmatically, on server side and on client side.
Server side
To create it on server side, we need to create an instance of ModalPopupExtender class, add it to the page, and set its properties accordingly. Below is the relevant code snippet:
Client side
It's also possible to create it with below javascript:
As a matter of fact, we can find out the code above by viewing the source of the generated page.
Generally, these two approaches can be applied to most of extender controls.
6.3 What if multiple TargetControls for the ModalPopup? [top]
A ModalPopup doesn't allow this natively, but it’s still possible to achieve by manipulating the modalpopup control with javascript directly.
Let's say there are two buttons(btnA, btnB) to be set as the target control.
1. We set btnA to be the target control with modalpopup's TargetControlID.
2. Assign a behaviorID to modalpopup.
3. Attach the following javascript function as the click event handler to btnB.
6.4 How do I show the ModalPopup from the server? [top]
It’s quite straightforward by calling ModapPopup’s Show method on server side.
6.5 How to keep ModalPopupExtender after full PostBack? [top]
When a ModalPopupExtender is already opened, it will be closed after a full PostBack. This’s because its client side state(opened or hidden) isn’t maintained automatically. As a result, it will always be hidden initially after a full PostBack.
To solve this, we have following options:
• Avoid using full PostBack by putting an UpdatePanel inside the ModalPopup.
• Save and restore its state manually on client side.
Below are two examples for each option:
Option 1:
Option 2:
1. Add a onShown event handler to the ModalPopupExtender.
2. Add a onHidden event handler to the ModalPopupExtender.
3. Set the HiddenField’s value to “shown” or “hidden” in the above functions accordingly.
4. In pageLoad function, call show function if the HiddenField’s value is "shown".
Here is the essential code snippet.
Related threads:
http://forums.asp.net/t/1134216.aspx
http://forums.asp.net/t/1135383.aspx
6.6 How do I show the ModalPopup during an UpdatePanel refresh? [top]
We can register two methods that will be called when updating start and updating end respectively. Then show and hide the modalpopup inside them.
Below script function can be used to achieve this:
6.7 Why the ModalPopupExtender’s OK button doesn’t fire its server side click event? [top]
That’s because ModalPopupExtender prevents it from causing a postback, and just hide the popup. To solve it, don’t specify the button as OKControl for the ModalPopupExtender.
7. Cascading Dropdown
7.1 How do I use Cascading DropDown with other data sources? [top]
Although the sample for the Cascading Drop Down extender works with XML data, it can just as easily work with any other data source such as a database or active directory. We have provided an example in the walkthroughs that discusses how to do this with a database. If you look carefully at the sample, you'll see that all it really does is call a webservice that returns an array of CascadingDropDownNameValue objects. To work with other data sources, just change the implementation of this web method to iterate over your data, build up an array of CascadingDropDownNameValue objects from it, and return this array.
If you're having problems getting this to work, be sure that the parameters of your web methods are exactly the same as in the sample/walkthrough (a requirement of ASP.NET AJAX) and that you're returning and empty array of objects for the case where there are no results.
Related threads:
CascadingDropDown and Database
Cascading Dropdown List VB error
7.2 CascadingDropDown not populating [top]
When using the CascadingDropDown, you should set EnableEventValidation="false" on the Page directive. If this is not set, the child dropdown lists will not load their values. See this thread for an explanation.
An alternative option is you can use ClientScriptManager’s RegisterForEventValidation method to register possible items in advance.
Related threads:
CascadingDropDown not populating
OK , I have narrowed it down to the CascadingDropDown as being the culprit!
cross page postback and cascading dropdown
7.3 Getting the text of the selected item in a CascadingDropDown [top]
Since the CascadingDropDown populates its lists dynamically, you cannot check the SelectedItem.Text property on the server in the current release. This thread suggests a workaround.
Related threads:
Cascading Dropdown SeletedItem.Text
CascadingDropDown and SelectedItem.Text
8. TabContainer
8.1 How to manipulate TabControl with JavaScript? [top]
Tab pages in TabContainer can be manipulated on client side directly.
1. Get a reference to the component on client side via $find function.
2. Invoke a corresponding function on the component to manipulate it.
For instance:
All of the functions defined in the TabContainer control can be found in the Tabs.js file of AJAX control toolkit’s source code.
Related thread:
http://forums.asp.net/t/1179322.aspx
9. Accordion
9.1 Add an Accordion Pane on client side [top]
Below is a sample demonstrates how to achieve it:
9.2 How to expand Accordion when moving the mouse over its header? [top]
We need to find all the header elements and attach mouseover event handler to each of them. For example,
Note: MyAccordion is the Accordion’s ID.
AccordionMouse function will expand the corresponding AccordionPane.
Related thread:
http://forums.asp.net/p/1179472/2009814.aspx#2009814
10. Calendar
10.1 How to change the CalendarExtender’s display mode? [top]
CalendarExtender’s default display mode is “Date” mode. To show the “Year” mode, you can use the following code.
For example,
Notice: _switchMode is a private method so its implementation may change in future releases.
Related thread:
http://forums.asp.net/p/1182046/2015437.aspx#2015437
11. DragPanel
11.1 My DragPanels overlap and don't remain where they are dropped? [top]
One of the first things that the DragPanel does to your target control is get its current position, set absolute positioning, and then move the control to its original position. When you do this, it causes any controls after it to slide into the empty space left by making it absolutely positioned. This can also cause multiple DragPanels to overlap. We recommend that you place controls that you plan to extend with DragPanels inside divs of the same size that will preserve your layout once the DragPanel gets wired up.
Another problem that people have has to do with drag panels not remaining still when they are dropped past the end of the document's content. This is a known issue with ASP.NET AJAX and some of the threads below suggest various workarounds.
Related threads:
2 DragPanel on the sample place
Creating DragPanel dynamicly
12. Slider
12.1 How to disable/enable the SliderControl? [top]
To disable the SliderControl, we can call the following function to remove all the handlers on its handle. For more information about $clearHandler, please refer to this document: (http://www.asp.net/AJAX/Documentation/Live/ClientReference/Global/ClearHandlersShortcutMethod.aspx).
To enable the SliderControl, we can use the following function to add all the handlers. For more information about $addHandler, please refer to this document: (http://www.asp.net/AJAX/Documentation/Live/ClientReference/Global/AddHandlersShortcutMethod.aspx).
We can call the Extender’s dispose() function to disable it. We can call initialize() function to enable it.Here is a sample to disable and enable a DropDownExtender.
Related thread:
http://forums.asp.net/p/1154395/1895548.aspx#1895548
13. Rating
13.1 How to change the Rating Control’s title property? [top]
Sometimes, we want to show characters instead of digits when the mouse is moving to the star. How can we achieve this? We can find the elements and change its title property. For example,
Related thread:
http://forums.asp.net/p/1163256/1928340.aspx
14. Validators
14.1 Why asp.net validators not working in the UpdatePanel? [top]
ASP.NET validators use ClientScriptManager to register necessary scripts, but this doesn’t work with UpdatePanel. Registration methods of ScriptManager in AJAX Extension should be used.
There is a hotfix available for solving this compatibility issue. It can be downloaded here: https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=6106&wa=wsignin1.0
Or we can install SP1 .Net framework 2.0 SP1:
http://www.microsoft.com/downloads/details.aspx?FamilyId=79BC3B77-E02C-4AD3-AACF-A7633F706BA5&displaylang=en
14.2 ValidatorCallout does not work in a postback? [top]
It doesn’t support postback currently. We can force it to show manually with the following steps:
1. Add a HiddenField to maintain the state of ValidatorCallout, its initial value is “false”.
2. Set its value to true if server side validation fails.
3. In client side pageLoad function, check HiddenField’s value and show ValidatorCallout accordingly.
Below is a sample:
15. Animation
15.1 Scripting Animations from the Ms Ajax AnimationExtender [top]
http://blogs.msdn.com/phaniraj/archive/2007/05/31/scripting-animations-from-the-ms-AJAX-animationextender.aspx
15.2 How to: Re-use Animation Extenders in a page [top]
http://blogs.msdn.com/phaniraj/archive/2007/08/15/how-to-re-use-animation-extenders-in-a-page.aspx
15.3 MS AJAX AnimationExtender : How Many Ways Do I Play thee? [top]
http://blogs.msdn.com/phaniraj/archive/2007/04/13/animations-how-many-ways-do-i-call-thee.aspx
15.4 How do I add animation to the SlideShow? [top]
This thread shows how to use them together.
16. Custom Extender
16.1 Contributing to the Toolkit [top]
We are trying out a new contribution model for the Toolkit. This applies to fixes to existing controls and introduction of new controls into the Toolkit. You can find more information on the How to contribute to the Toolkit and How to use the Toolkit Patch Utility.
16.2 How do I get my own control included in the ASP.NET AJAX Control Toolkit? [top]
As you may have noticed in Shawn's welcome message, we are actively working on making the ASP.NET AJAX Control Toolkit a shared source project with contributions from the community. We're still working out all the details, but we'll be sure to let you know when/how/where this next step of the Toolkit will take off. In the meantime, if you have any amazing controls or fabulous insights you can post them in the forums to share with your fellow developers.
16.3 I don't see my changes to the JavaScript files in the provided project or a project created from the templates [top]
To make deployment of your controls easier, all the JavaScript files are embedded as web resources by default (via the WebResourceAttribute in a region at the top of your extender). This means that they're compiled into the binary with the rest of your source and delivered to the client indirectly. If you make a change to the script, you need to rebuild the project for the change to be seen on the client when testing. To make it easier to debug your scripts without constantly rebuilding, check out the section "Easily modifying and debugging scripts" of Other Neat Stuff for information about using the ScriptPath property.
Related thread:
Confirmation message on ReorderList
16.4 I get an "Assertion Failed: Unrecognized Tag" error with my new control [top]
This error message appears for one or more of the following reasons:
• You didn't make your script an Embedded Resource (select the file, and set "Build Action" to "Embedded Resource" in the property window). This happens by default when you create an ASP.NET AJAX Control Project, but needs to be done manually when new controls are added to the project.
• The WebResourceAttribute at the top of your extender doesn't correctly point at your JavaScript file's resource name. If you're unsure what the proper resource name is, you can easily find out by running ILDASM or Reflector and finding your script in the manifest resources.
• The values provided in the [ClientScriptResource("prefix", "tag", typeof(MyControlExtender), "Same.Value.As.WebResourceAttribute.Above.js")] attribute on your extender don't match either the prefix and tag names provided at the bottom of your script via Sys.TypeDescriptor.addType('prefix', 'tag', MyCompany.MyControl); or the resource name in the WebResourceAttribute above.
Related thread:
Assertion Failed: Unrecognized tag Error