Using Telerik Ajax controls in Custom-built SharePoint 2010 Web Part

I am trying to use Telerik Ajax, which is very powerful UI component, in custom-built SharePoint 2010 Web Part.

After a few days’ try & error, finally found how to config Telerik Ajax in SharePoint 2010.

The settings below is for Telerik Ajax 2010 Q2 sp1. For other versions, the value of version number shall be changed accordingly. (Note: PublicKeyToken is always the same value of ’121fae78165ba3d4′ for all versions, so no need change)

1. First you need to install Telerik.Web.UI.dll and Telrik.Web.Design.dll in the GAC. The simplest way is to drag & drop the file to ‘windows\assembly’ folder.`

2. Next you should tell SharePoint that the controls from the Telerik.Web.UI.dll is safe to use.

To do so you should add a few <SafeControl> entries within the <SafeControls> section in your web.config:

<SafeControl Assembly=”Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ Namespace=”Telerik.Web.UI” TypeName=”*” Safe=”True” SafeAgainstScript=”False” />
<SafeControl Assembly=”Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ Namespace=”Telerik.Web.UI.Editor” TypeName=”*” Safe=”True” SafeAgainstScript=”False” />
<SafeControl Assembly=”Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ Namespace=”Telerik.Web.UI.Widgets” TypeName=”*” Safe=”True” SafeAgainstScript=”False” />
<SafeControl Assembly=”Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ Namespace=”Telerik.Web.Design” TypeName=”*” Safe=”True” SafeAgainstScript=”False” />

3. (Optional) Register  upload and compression module in SharePoint 2010 web.config file under modules tag

<modules>
<remove name=”RadUploadModule” />

<add name=”RadUploadModule” type=”Telerik.Web.UI.RadUploadHttpModule, Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ preCondition=”integratedMode” />

<remove name=”RadCompression” />

<add name=”RadCompression” type=”Telerik.Web.UI.RadCompression, Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ preCondition=”integratedMode” />
</modules>

4. (Optional) Register handlers in SharePoint 2010 web.config file under handlers tag

<handlers>
<add name=“ChartImage.axd_*” path=“ChartImage.axd” verb=“*” type=“Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ preCondition=“integratedMode” />

<add name=“Telerik.Web.UI.SpellCheckHandler.axd_*” path=“Telerik.Web.UI.SpellCheckHandler.axd” verb=“*” type=“Telerik.Web.UI.SpellCheckHandler, Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ preCondition=“integratedMode” />

<add name=“Telerik.Web.UI.DialogHandler.aspx_*” path=“Telerik.Web.UI.DialogHandler.aspx” verb=“*” type=“Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ preCondition=“integratedMode” />

<add name=“Telerik.RadUploadProgressHandler.ashx_*” path=“Telerik.RadUploadProgressHandler.ashx” verb=“*” type=“Telerik.Web.UI.Upload.RadUploadProgressHandler, Telerik.Web.UI” preCondition=“integratedMode” />

<add name=“Telerik.Web.UI.WebResource.axd_*” path=“Telerik.Web.UI.WebResource.axd” verb=“*” type=“Telerik.Web.UI.WebResource, Telerik.Web.UI” preCondition=“integratedMode” />
</handlers>

5. Register ‘Telerik’ prefix

When drag Telerik Ajax component onto user control (.ascx), Visual Studio will automatically add the following to the top of ascx file:

<%@ Register assembly=”Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ namespace=”Telerik.Web.UI” tagprefix=”telerik” %>

This is recommended approach so that Visual Studio can parse the Telerik related syntax correctly.

This clause need to be manually added to master page, if we need Telerik component, such as Telerik Menu, in master page.

Alternative way is adding the clause below to SharePoint 2010 web.config file.

<pages>
<controls>
<add tagPrefix=”telerik” namespace="Telerik.Web.UI” assembly="Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4″ />
</controls>
</pages>