ASP.NET AJAX Control Toolkit FAQ

Rate It (17)

Last post 05-06-2008 7:37 AM by Raymond Wen - MSFT. 1 replies.

Sort Posts:

  • ASP.NET AJAX Control Toolkit FAQ

    05-22-2006, 7:59 PM
    Locked
    • Loading...
    • AgilityTeam
    • Joined on 05-22-2006, 6:45 PM
    • Posts 1
    Old Version FAQ
    Welcome to the ASP.NET AJAX Control Toolkit forum. This ongoing FAQ compiled from your posts contains answers to common questions, workarounds for known issues, and bug fixes we've made that haven't been released yet. Please check back every so often as we'll update it regularly. Thank you for posting in the forum and helping us make the Toolkit better.

    Posting in the right forum
    Please include code samples and entire error messages

    1. My controls briefly appear when the page loads before being hidden (specifically with CollapsiblePanelExtender, PopupControlExtender, etc.)  (5/22/06)
    2. When is the next release and where can I get it?  (8/4/06)
    3. How do I get my own control included in the ASP.NET AJAX Control Toolkit?  (5/22/06)
    4. I don't see my changes to the JavaScript files in the provided project or a project created from the templates  (5/22/06)
    5. I get an "Assertion Failed: Unrecognized Tag" error with my new control  (5/22/06)
    6. I get an "Assertion Failed: Duplicate use of ID "XXX" for object of type YYY.ZZZ" error  (8/04/06)
    7. How do I use Cascading Drop Down with other data sources?  (5/22/06)
    8. Browser compatibility  (5/22/06)
    9. Can I use your scripts if I'm not using ASP.NET?  (5/22/06)
    10. Managing state on the client  (5/22/06)
    11. Why aren't the samples in VB.NET?  (5/22/06)
    12. Installation Errors  (5/22/06)
    13. Dynamically creating controls  (5/22/06)
    14. Can I change the value of a property dynamically on the client?  (5/22/06)
    15. z-Order problems  (5/22/06)
    16. My DragPanels overlap and don't remain where they are dropped  (5/22/06)
    17. How do I force a PostBack from my JavaScript?  (5/22/06)
    18. Target control with ID 'XYZ' could not be found for extender...  (7/07/06)
    19. Changing extender properties on the server  (7/10/06)
    20. CascadingDropDown not populating  (7/10/06)
    21. Getting the text of the selected item in a CascadingDropDown  (7/10/06)
    22. Scripts don't load when the extender targets a control in an EditItemTemplate  (8/04/06)

     

    Posting in the right forum
    While we work closely with the ASP.NET AJAX team when developing the Toolkit, they're the real experts on general ASP.NET AJAX issues. When your problem isn't related directly to using the Toolkit, we would appreciate if you consider one of the other newsgroups such as ASP.NET AJAX Discussion and Suggestions. Your post will be more helpful to others looking for similar advice if it's in the right place. If you're not sure where to post a particular topic though, you can start here and we'll redirect you if needed.


    Please include code samples and entire error messages
    Whenever possible we ask that you include a small code sample with your post to help us identify the problem. Many issues are very difficult to describe, but we'll be able to spot them right away in your code. You will always get a faster response if you provide a complete, executable sample (i.e. from <%Page%> to </html> and other code behind or in web services, etc.) and remove anything not essential to causing your problem. Also, please be aware that these forums have built in support for inserting properly formatted and indented code. You can enable it by going to "Profile > Site Options" and changing the "Content Editor" to "Rich Editor (with code support)." Afterwards you'll notice a new icon on the content editor toolbar that looks like a document with curly braces. Clicking this will allow you to append code in a variety of languages.

    If you are posting because you're seeing an error message, please include the exact text of the error message in the post. This makes it much easier for us to diagnose why you might be raising the error and suggest ways to avoid it.


    1. My controls briefly appear when the page loads before being hidden (specifically with CollapsiblePanelExtender, PopupControlExtender, etc.)
    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 Posts:
    Popup Exender panel flickers
    CollapsiblePanelExtender issue
    Slow Loading HoverMenu
    DragPanelExtender initially non-visible


    2. When is the next release and where can I get it?
    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.


    3. How do I get my own control included in the ASP.NET AJAX Control Toolkit?
    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.


    4. I don't see my changes to the JavaScript files in the provided project or a project created from the templates
    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 Post:
    Confirmation message on ReorderList


    5. I get an "Assertion Failed: Unrecognized Tag" error with my new control
    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 Post:
    Assertion Failed: Unrecognized tag Error


    6. I get an "Assertion Failed: Duplicate use of ID "XXX" for object of type YYY.ZZZ" error
    Most people that see this error message are receiving it because of a known issue with UpdatePanel in the April CTP release of ASP.NET AJAX. The ASP.NET AJAX client side script framework has a mechanism for tracking all of its objects in something analogous to the Controls collections in ASP.NET and WinForms. When UpdatePanel causes a refresh, all the client side objects are still in these collections but are re-added with the same name - triggering a name collision error. We will be providing a workaround for this in the next release. For the time being, you can insert the following code in your behavior's dispose method:

        // The following call to removeObject avoids the following warning
        // when a control is reloaded within an UpdatePanel:
        // Assertion Failed: Duplicate use of id "XXX" for object of type
        // "AtlasControlToolkit.YYY".
        var applicationMarkupContext = Sys.Application.getMarkupContext();
        if (applicationMarkupContext) {
            applicationMarkupContext.removeObject(this);
        }

    We have discussed this workaround with the ASP.NET AJAX team and they feel that it's a safe thing to do.

    You may also see this error message if you have two extender properties with the same ID. To work around this, just set the ID property on your extender properties to be something unique (note that the ID property doesn't show up in Intellisense).

    Related Posts:
    Popup control - "Assertion failed: Duplicate use of id..."
    Assertion Failed: Duplicate use of id "ctl00_SearchBox1_TextBoxGoogleSearch of object of type "Sys.UI.TextBox".
    Popup Extenders, UpdatePanels, and my composite custom control; help
    More Assertion Failed: Duplicate use of id


    7. How do I use Cascading Drop Down with other data sources?
    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 Posts:
    CascadingDropDown and Database
    Cascading Dropdown List VB error


    8. Browser compatibility
    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 Posts:
    FYI: how cross browser are the Toolkit components
    I tried the toolkit from your sample site with ...


    9. Can I use your scripts if I'm not using ASP.NET?
    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.


    10. Managing state on the client
    It is often userful to maintain changes to state on the client so that it is preserved upon postback. For example, CollapsiblePanel tracks whether it is open or closed so that it will stay that way if the page is reloaded. The controls in the Toolkit utilize the ClientState mechanism to make this possible, as mentioned in the section "Maintaining state on the client" of Other Neat Stuff.

    To work with ClientState, you need to set EnableClientState = true; in the constructor of your control's properties class. Then on the server you can read and write to the ClientState property with:

    MyExtenderProperties properties = MyExtender1.GetTargetProperties(myControl1);
    if (properties != null) { properties.ClientState
    = "Custom string that we'll be able to read on the client and server.";
    }

    To access the ClientState on the client, use the getClientState/setClientState methods included in your script template. It should be obvious that the ClientState mechanism is only intended for scenarios simple enough where you can easily parse a string representation of the state on both sides. For a more sophisticated state management mechanism, take a look at the ASP.NET AJAX support for ASP.NET profiles.

    Related Post:
    Maintaining state on the client and accesing on the server


    11. Why aren't the samples in VB.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.

    I
    f 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 Posts:
    Cascading Dropdown List VB error
    CascadingDropDowns in VB
    CascadingDropDown Problems......


    12. Installation Errors
    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 Posts:
    error installing
    Can't install the toolkit
    ASP.NET AJAX Control Toolkit


    13. Dynamically creating controls
    It is possible to dynamically create controls on both the client and server. From a very high level, the architecture of the Toolkit involves writing Control Extenders that generate the necessary code to wireup ASP.NET AJAX JavaScript behaviors on the client. If you want to dynamically add controls on the server, create a new instance of your extender and associate a new instance of your extender properties to a target control. If you want to dynamically add controls on the client, you need to create a new instance of the behavior and add it to a Sys.UI.Control wrapper's behaviors collection.

    The following example dynamically adds a new Hover Menu on the server, assuming you already have a HoverMenuExtender named HoverMenuExtender1 on the page:
    AtlasControlToolkit.HoverMenuProperties properties
    = new AtlasControlToolkit.HoverMenuProperties(); properties.TargetControlID
    = "Link1"; properties.PopupControlID = "Panel1";
    properties.PopupPosition = AtlasControlToolkit.HoverMenuPopupPosition.Right; HoverMenuExtender1.TargetProperties.Add(properties);

    To add a control on the client side in script, you'll first need to ensure the script is downloaded on the client (either by placing an instance of the Extender on the page with no ExtenderProperties, or by linking a <script> tag to a copy of the script). We then want to create a new ASP.NET AJAX control and corresponding behavior which we add to its Sys.UI.Control.get_behaviors() collection. The following example adds a new HoverMenuBehavior:

      <script language="javascript">
        function onAddBehavior()
        {
            // Create the behavior
            var link = new Sys.UI.Control($('Link1'));
            var hoverBehavior = new AtlasControlToolkit.HoverMenuBehavior();
            hoverBehavior.set_PopupControlID('Panel1');
            hoverBehavior.set_PopupPosition('Right');

            // Attach the behavior
            link.get_behaviors().add(hoverBehavior);
            hoverBehavior.initialize();
        }
      </script>

    Related Posts:
    Creating Atlas Controls

    Creating DragPanel dynamicly

    Collapsible Panel Behaviour

    Dynamically Create Controls and Extenders


    14. Can I change the value of a property dynamically on the client?
    Yes, you can work directly with the JavaScript behaviors on the client side. If you set the ID attribute on your extender properties, you'll be able to access it in script using var behavior = $object('MyID');. This behavior can then call all the exposed methods in the script. You'll find complete examples in the posts below.

    Related Posts:
    Referencing CollapsiblePanelExtender in jscript
    cascadingdropdown add client-side clear label how?


    15. z-Order problems
    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 Posts:
    ListBox and DragPanelExtender
    ModalPopup and <SELECT>


    16. My DragPanels overlap and don't remain where they are dropped
    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 it's 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 posts below suggest various workarounds.

    Related Posts:
    2 DragPanel on the sample place
    Creating DragPanel dynamicly


    17. How do I force a PostBack from my JavaScript?
    This post describes in detail how to perform a PostBack from your JavaScript, similar to the way ReorderList does it.


    18. Target control with ID 'XYZ' could not be found for extender...
    An extender must be in the same naming container 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 Posts:
    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?


    19. Changing extender properties on the server
    Although other items in the FAQ demonstrate how to manipulate extender properties on the server, it keeps coming up so we will call it out specifically.  All MyExtender instances expose a GetTargetProperties method that take a control reference and return an instance of the corresponding MyExtenderProperties object.  Once you have this object you can change any properties you like.  For example, the following code will collapse Panel1, which is being extended by a CollapsiblePanelExtender cpe
    :

            bool collapsed = true;
            CollapsiblePanelProperties properties = cpe.GetTargetProperties(Panel1);
            if (properties != null)
            {
                properties.ClientState = collapsed.ToString().ToLower();
                properties.Collapsed = collapsed;
            }


    Related Posts:
    Referencing CollapsiblePanelExtender in jscript
    Access Properties in codebehind
    Collapse or Expand Panel from button click in VB

     


     

    20. CascadingDropDown not populating
    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 post for an explanation.

    Related Posts:
    CascadingDropDown not populating
    OK , I have narrowed it down to the CascadingDropDown as being the culprit!

     


     

    21. Getting the text of the selected item in a CascadingDropDown
    Since the CascadingDropDown populates its lists dynamically, you cannot check the SelectedItem.Text property on the server in the current release.  This post suggests a workaround.

    Related Posts:
    Cascading Dropdown SeletedItem.Text
    CascadingDropDown and SelectedItem.Text

     


     

    22. Scripts don't load when the extender targets a control in an EditItemTemplate
    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 Posts:
    Assertion Failed: Unrecognized tag AtlasControlExtender:ValidationScript
    BUG - NumericUpDownExtender in Gridview EditItemTemplate

  • Re: FAQ in ASP.NET AJAX Control Toolkit

    05-06-2008, 7:37 AM
    Locked

     

    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.   

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

    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: 

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

    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,   

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

    <asp:ScriptManager runat="server" ID="scriptManager">
      <Services>
        <asp:ServiceReference
           path="~/WebServices/SimpleWebService.asmx" />   
      </Services>  
    </asp:ScriptManager

    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, 

    <system.web>
      <httpHandlers>
         <remove verb="*" path="*.asmx"/>
         <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>
      </httpHandlers>
    <system.web>
    

    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.

    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:

    $find("BevaviorID of the Extender").set_contextKey("Desired Contextkey");

    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: 

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

    4.3 How do I cancel an event? [top]

    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.

    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: 

    protected void Page_Load(object sender, EventArgs e)
    {
         ModalPopupExtender mpe = new ModalPopupExtender();
         Page.Form.Controls.Add(mpe);
         mpe.TargetControlID = "button1";
         mpe.PopupControlID = "popup";
    } 

    Client side

    It's also possible to create it with below javascript: 

    $create(AjaxControlToolkit.ModalPopupBehavior, 
           {"OkControlID":"Button2",
           "PopupControlID":"Panel1",
           "PopupDragHandleControlID":"Panel2",
           ""id":"mpe"}, 
           null, null, 
           $get("Button1")); 

    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">
    
    <script runat="server">
        protected void Button2_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:Button ID="Button1" runat="server" Text="Show modal popup" />
            <asp:Button ID="Button2" runat="server" Text="Trigger PostBack" OnClick="Button2_Click" />
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
                popupcontrolid="Panel1" targetcontrolid="Button1">
    
            </ajaxtoolkit:modalpopupextender>
            <asp:Panel ID="Panel1" runat="server">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button2" />
                    </Triggers>
                </asp:UpdatePanel>
                Modal Popup
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>

                 
    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.  

    <script type="text/javascript">
    
        function pageLoad()
        {
            var mpe = $find("mpe");
            mpe.add_shown(onShown);
            mpe.add_hidden(onHidden);      
    
            var shown = ($get("HiddenField1").value == "shown");
            if(shown)
            {
                mpe.show();
            }
        }   
    
        function onShown()
        {
            var hf = $get("HiddenField1");
            hf.value = "shown";
        }
        
        function onHidden()
        {
            var hf = $get("HiddenField1");
            hf.value = "hidden";
        }
    
    </script>
    
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <asp:Button ID="Button3" runat="server" Text="Show modal popup" />
    <asp:Button ID="Button4" runat="server" Text="Trigger PostBack" />
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
        popupcontrolid="Panel1" targetcontrolid="Button1">
    </ajaxtoolkit:modalpopupextender>
    <asp:Panel ID="Panel1" runat="server">
        Modal Popup
    </asp:Panel>
    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: 

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

    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:  

    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.

    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:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script