How to use AJAX Control Toolkit with SharePoint 2010 custom Webparts

 

 Introduction:

         The AJAX Control Toolkit offers so much useful functionality, however for some reason Microsoft refuses to integrate it as part of their product. This has caused problems with SharePoint 2003 – 2010, however as SharePoint now has standard Ajax integration we are now faced with another problem.

With previous versions of SharePoint you would need to add the AJAX references to the Web.config file as well as register the AJAX assemblies. In addition you would need to do the same for the AJAX Control Toolkit as well as incorporating a script manager into your master pages.Well with SharePoint 2010, the AJAX stuff is already there, but the script managers do not work with the AJAX Control Toolkit. Here is how I finally managed to get this working:

 

Note: SharePoint 2010 is running on top of the .NET framework 3.5, it cannot work with the Ajax Control Toolkit 3.5 or 4.0 as both of them are optimized for .NET 4.0. If you  want to use Ajax Control Toolkit, you have to use an older version which is  AJAX Control Toolkit Release Notes - September 2009 Release (Version 3.0.30930).

You can download from website: (http://ajaxcontroltoolkit.codeplex.com/releases/view/33804)

 

 

Detailed Steps:

 

 Step 1:

Registering the AJAX Control Toolkit

First you need to download the AJAX Control Toolkit binaries. After some headaches I found out that the latest release does not work with SharePoint 2010. You get a bunch of ‘sys’ errors after implementation. You will therefore need to download the 30930 version which can be found here OR You can download from website: (http://ajaxcontroltoolkit.codeplex.com/releases/view/33804)

Copy the “AjaxControlToolkit.dll” file into the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin” SharePoint directory (obviously if you didn’t use port 80, the path would have a different port number).

 

Step 2:

Add 3 lines into the web.config file of your website (eg. C:\inetpub\wwwroot\wss\VirtualDirectories\80\web.config) 

 

*Add fallowing line under <controls>:

<controls>
 <add tagPrefix="cc1" assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral,
 PublicKeyToken=28f01b0e84b6d53e"namespace="AjaxControlToolkit"> 
<!-- skip lines -->

*Add fallowing line under<SafeControls>

 

<SafeControls>

<SafeControlAssembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral,
 PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit"
 TypeName="*" Safe="True" />
<!-- skip lines --> 

 

*Add fallowing line under <assemblies>   

 

<add assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral,
 PublicKeyToken=28f01b0e84b6d53e" />

<!-- skip lines -->

 

Step 3:

Adding the AJAX Control Toolkit to Visual Studio 2010

Open Visual studio and start a new Web Part project. When you have the project open, add a new reference to the project by browsing to the “AjaxControlToolkit.dll” file in the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin” directory.

 

 

 Once you have this added to your project, go ahead and add the following line to your user control:

 

<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  

 

 

Step 4: 

Now, add a new Tab to your Toolbox, then right click and ‘choose items’. Browse to the “AjaxControlToolkit.dll” file in the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin” directory and add the controls. You should see the following results .

Add Tab:

 

 

 Brose your ajax .dll on above mentioned location

 

 

 

Click on  ok button you  you will see the result:

 

 

 

 

Step 4:

OK, you have everything in place and you start to build a Web Part with the AJAX Toolkit Controls and find that the control is being rendered, but it is not functioning. You get a Javascript error pointing to your AJAX files being out of date. This is because SharePoint 2010 now has a ScriptManager added to every Master Page by default. You need to open up the Master Page you’re using (typically with SharePoint Designer) and 

Do fallowing changes in Master page of your Site

 

<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 

 

and  remove the existing <asp:ScriptManager> tag and replace it with the following:

 <cc1:ToolkitScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true"

EnableScriptGlobalization="false" EnableScriptLocalization="true" /> 

 

 Woohoo !!

Now your Ajax control toolkit is fully functional with SharePoint 2010.I Hope this helps you save some of the headaches I went through.