Implement Ajax Control Toolkit with SharePoint 2013

Hi All

After Painstaking research, I managed to make AjaxControlToolkit and especially Update Panel working with SharePoint 2013 using the following steps:


1- Download Ajax Control Toolkit 4.5 from
http://ajaxcontroltoolkit.codeplex.com/releases/view/112805

2- Add (AjaxControlToolkit and AjaxMin dlls) reference to your project.

3- Register AjaxControlToolkit and AjaxMin namespaces in SharePoint package Designer.

• To Open package Designer see below image

• To register AjaxControlToolkit and AjaxMin as safe controls see below two images

• Register AjaxMin dll as above step.

4- Add AjaxToolkit Assembly under assemblies node in Web.Config file of your web application. below line should be added

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

5- Replace the default ScriptManager in your masterpage with the ToolkitScriptManager

• First add below line in head section of the master page

<%@ Register assembly="AjaxControlToolkit, Version=4.5.7.1005, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" namespace="AjaxControlToolkit" tagprefix="asp" %>

• Second Remove default script manger then add below ToolkitScriptManager line, make sure its placed inside form section of master page

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">

               </asp:ToolkitScriptManager>

6- Final step and very important step that's make ajax Update panel control work with sharepoint 2013 , move SPWebPartManager from head section to form section



Finally it should look like below :

<SharePoint:SharePointForm onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}" runat="server">

<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
        <WebPartPages:SPWebPartManager runat="Server"/>
    </SharePoint:AjaxDelta>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">

               </asp:ToolkitScriptManager>

Note: to use ajax in your webpart add below line in the top of your webpart design

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

Thanks

Happy AJAX

Ziad Sowan