How to Combine Scripts using Telerik ASP.NET with AJAX Control Toolkit

Question

I am working on a corporate website where the AJAX Controls are being used in tandem with Telerik ASP.NET Controls. While this poses no real issue in terms of functionality, there is a problem with overall performance.

In order to prevent the AJAX toolkit script manager from making multiple calls for all scripts on every component it supports, we set the CombineScripts flag to true, set the EnablePartialRendering flag to true and specify a URL for the CombineScriptsHandlerUrl.

This works great as the generated Scripts for the AJAX Components are significantly decreased as well as corresponding roundtrips. However, we've found that the Telerik Controls have issues with this setting. More specifically for this particular site (the TelerikHTMLChart Control)

After further research, it was affirmed that the CombineScripts flag has to be set to false in order for the Telerik controls to work with the AJAX controls in this capacity.

Obviously this is not the most ideal option when you're targeting to increase the sites overall response time.

Has anyone having this issue been able to acquire a reasonable solution for the problem that would allow the AJAX and Telerik ASP.NET components to play happily together without performance degradation?

Answer 1

Thank you for the response rdmptn, but while in the process of waiting for someone to respond with an appropriate and acceptable resolution; I managed to figure out the solution to the issue. So I am posting this for others who may also have the concerns for performance and require a viable solution to the problem.

Rdmptn has already done a very fine job proposing workarounds this problem. In fact, the cause of the problem is in fact as has already been stated. However, there is another way to have the AJAX ToolkitScriptManager implemented with the CombineScripts flag set to true to alleviate excessive roundtrips and also use the Telerik Controls in a performance efficient manner. I had to experiment a bit in effort of finding this solution so maybe this will help others. The Telerik support staff was unable to provide this solution, so I am also giving it to them.

First, you have to identify the required Telerik Script references required for your particular scenario. You may acquire this from the following link: http://www.telerik.com/help/aspnet-ajax/introduction-disabling-embedded-resources.html

Then find the Telerik control(s) you need on your site. You will note that the options provided in this link restate the 3rd bullet point provided by rdmptn. However, the method I am describing does not require any modification to the web.config nor does it use CDN references. Our decision to opt out of CDN references is to avoid further potential performance degradation by reliance on other sites.

Once you've identified the control(s) you require, copy and paste the ScriptReferences from the link provided into a tag within the AJAX ToolkitScript Manager. In my case, the resulting code would look like this:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" ScriptMode="Release" runat="server" EnablePartialRendering="true"
 CombineScripts="true" CombineScriptsHandlerUrl="~/AjaxScriptMergeHandler.ashx">
    <CompositeScript>
        <Scripts>
                <asp:ScriptReference Path="~/Scripts/Common/Core.js" />
                <asp:ScriptReference Path="~/Scripts/Common/jQuery.js" />
                <asp:ScriptReference Path="~/Scripts/Common/jQueryPlugins.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/html5/core.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/html5/dataviz/core.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/Data/html5/data.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/html5/userevents.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/DataViz/html5/dataviz/themes.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/DataViz/html5/dataviz/chart.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/DataViz/html5/dataviz/svg.js" />
                <asp:ScriptReference Path="~/Scripts/Common/HTML5UI/DataViz/html5/dataviz/vml.js" />
                <asp:ScriptReference Path="~/Scripts/HtmlChart/RadHtmlChart.js" />
        </Scripts>
    </CompositeScript>
</ajaxToolkit:ToolkitScriptManager>

This approach allows the AJAX ToolScriptManager to explicitly minimize the number of Scripts required to support the components you actually use in your site (or webpage) having the CombineScripts tag set to true while simultaneously loading only those Scripts that are required within your application to be loaded for the Telerik controls.

No more being set to false as has been the often response for the noted incompatibility issues; while at the same time loading only the required Scripts to support your Telerik controls. VOILA!

Hope this information helps others and saves them the time we've wasted to get a resolution.

Again, thank you rdmptn for posting your suggestions!

Answer 2

I am not aware of a way to do that. AjaxControlToolkit broke compatibility with <asp:ScriptManager>. Telerik controls are built over the vanilla MS AJAX framework, so there is no compatibility between the two suites due to the AjaxControlToolkit changes in the winter of 2013.

Thus, ideas to consider are:

• remove the AjaxControlToolkit controls in favor of the Telerik controls

• live with more requests than you would like to

• try downloading the combined script for the Telerik controls from their CDN and referencing that in your page, then disabling the embedded scripts for them. You can enable it by using RadSCriptManager, enabling its CDN and setting the Telerik.ScriptManager.TelerikCdn.CombinedScript appSettings key to true in the web.config

• if you only need the HtmlChart from Telerik, try the Kendo Chart widget. They are both the same, but the Kendo widged is pure client-side code and is not related to MS AJAX, AjaxControlToolkit or the UI for ASP.NET AJAX suite