## Important Information > **It is generally not recommended to use both Telerik UI for ASP.NET AJAX and Kendo UI for jQuery on the same page.** These suites use different versions of Kendo UI scripts, which may cause compatibility issues. # RadHtmlChart Integration With KendoUI Widgets This help article illustrates a workaround of how to use the [ASP.NET AJAX Chart](https://www.telerik.com/products/aspnet-ajax/html-chart.aspx) control and a [Kendo UI Widget](https://docs.telerik.com/kendo-ui/introduction) on the same WebForms page. **RadHtmlChart** is an ASP.NET server-side wrapper of the Kendo UI charting widget and it already loads the chart specific scripts and jQuery. You can select either pattern below in order to avoid script conflicts in such a setup: * [Use External jQuery with RadScriptManager](https://www.telerik.com/products/aspnet-ajax/documentation/controls/htmlchart/how-to/radhtmlchart-integration-with-kendoui-widgets#use-external-jquery-with-radscriptmanager) * [Disable Embedded Resources of RadHtmlChart](https://www.telerik.com/products/aspnet-ajax/documentation/controls/htmlchart/how-to/radhtmlchart-integration-with-kendoui-widgets#disable-embedded-resources-of-radhtmlchart) ## Use External jQuery with RadScriptManager When you load an external jQuery on a page that has a RadHtmlChart instance you should consider a possible jQuery conflict because the chart already loads it internally. This scenario usually happens on pages that contain controls from different suites (e.g, RadHtmlChart and Kendo UI widget which depends on external jQuery). You can easily handle that situation by configuring RadScriptManager to use the external jQuery as follows: 1. Reference jQuery and the Kendo UI stylesheet in the section: ```ASP.NET ``` 2. Configure the RadScriptManager as per the **Including external jQuery** section from the [Using jQuery](https://www.telerik.com/products/aspnet-ajax/documentation/integration/jquery) article. ```ASP.NET ``` 3. Add RadHtmlChart. Define the RadHtmlChart before loading Kendo UI scripts. ```ASP.NET ``` 4. Load Kendo UI Scripts After RadHtmlChart. Ensure that Kendo UI scripts load after RadHtmlChart: ```ASP.NET <%-- Load Kendo scripts after the AJAX Chart --%> ``` 5. Initialize Kendo UI Widgets. After scripts are loaded, initialize Kendo UI widgets, such as Kendo Editor. ```ASP.NET ``` See **Example 1** for details. > caption Example 1: RadHtmlChart and Kendo UI editor integration with external jQuery. ```ASP.NET RadControls
<%-- Load Kendo scripts after the AJAX Chart --%>
``` ## Disable Embedded Resources of RadHtmlChart You can [Disable Embedded Scripts](https://www.telerik.com/products/aspnet-ajax/documentation/getting-started/performance/disabling-embedded-resources) of RadHtmlChart and manually reference them for custom deployment scenarios. You should also ensure there are no jQuery / scripts conflicts when integrating RadHtmlChart with Kendo UI widgets in such a scenario. This can be done by loading a single jQuery and considering the following scripts dependency order: 1. Add script references to the files listed below in this specific order. 2. **Core.js** — a basic script that the Telerik.Web.UI depends on. 3. **jQuery.js** — the jQuery JavaScript library from the Telerik.Web.UI assembly. 4. **jQueryInclude.js** — a script that assigns the Telerik.Web.UI jQuery to the global $ and jQuery aliases. 5. **jQueryPlugins.js** — additional JavaScript plugins required by the **RadHtmlChart**. 6. **kendo.all.min.js** — the Kendo UI JavaScript library. 7. **RadHtmlChart.js** — the **RadHtmlChart**'s specific scripts including the skins. It must be loaded after the **kendo.all.min.js** file, in order to prevent the **RadHtmlChart** skins from overriding by the Kendo UI themes. 8. If you are using **RadScriptManager**, set the **EnableScriptCombine** property to **false**. 9. Set the **EnableEmbeddedScripts** property of the **RadHtmlChart** control to **false** > caption Example2: RadHtmlChart and Kendo UI editor integration with disabling embedded resources of the chart. ```ASP.NET RadControls
``` ## See Also * [Kendo UI Components](https://docs.telerik.com/kendo-ui/introduction) * [Using jQuery](https://www.telerik.com/products/aspnet-ajax/documentation/integration/jquery) * [Disabling Embedded Resources](https://www.telerik.com/products/aspnet-ajax/documentation/getting-started/performance/disabling-embedded-resources)