Disable the Embedded jQuery in RadEditor dialogs

AUTHOR: Rumen Zhekov

DATE POSTED: April 10, 2018

HOW-TO
Disable the Embedded jQuery in RadEditor dialogs and adding a different version of the popular JavaScript library to them.
 

 
SOLUTION
The solution provided in the documentation Disabling the Embedded jQuery does not completely cover the scenario with importing different version of jQuery in RadEditor dialogs. Please follow the instructions below to disable the embedded jQuery and add your own version of it (in our example it will be jQuery v.3.3.1):

• Disable the built-in jQuery from the aspx page and add reference to the new jQuery file:
  
  ASPX
  
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false" EnableScriptCombine="false">

      <Scripts>

          <asp:ScriptReference  Path="~/jquery-3.3.1.min.js" />

          <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

          <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />

          <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />

      </Scripts>

  </telerik:RadScriptManager>
  
  You can also globally disable the embedded jQuery via the web.config file:  
   
  Web.config
  
  <appSettings>

    <add key="Telerik.ScriptManager.EnableEmbeddedjQuery" value="false" />

  </appSettings>
   
   
• Register the external dialog files of RadEditor by setting the ExternalDialogsPath property to point to the "~/EditorDialogs" folder which you can obtain from the controls installation:
   
  ASPX
  
  <telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs"></telerik:RadEditor>
   
  
  
• Create a WebUserControl.ascx control in the EditorDialogs folder and put the following code in it:
  
  
  <%@ Control Language="C#" AutoEventWireup="true"  %>

  <script runat="server" type="text/C#"> 

   

      protected void Page_Init(object sender, System.EventArgs args)

      {

          ScriptManager sm = ScriptManager.GetCurrent(Page);

          if (sm != null && (sm as Telerik.Web.UI.RadScriptManager) != null)

          {

              sm.Scripts.Add(new ScriptReference("~/jquery-3.3.1.min.js"));

              sm.Scripts.Add(new ScriptReference("Telerik.Web.UI.Common.Core.js", "Telerik.Web.UI"));

              sm.Scripts.Add(new ScriptReference("Telerik.Web.UI.Common.jQueryExternal.js", "Telerik.Web.UI"));

              sm.Scripts.Add(new ScriptReference("Telerik.Web.UI.Common.jQueryPlugins.js", "Telerik.Web.UI"));

          }

      }

  </script>
   
  This will create a new RadScriptManager which will import the scripts in the correct order.
   
• The final step is to register the WebUserControl.ascx inside the File Browser dialogs (FileBrowser.ascx), the Link Manager (LinkManager.ascx) and the rest of the dialogs available in your app:
   
  LinkManager.ascx
  
  <%@ Control Language="C#" %>

  <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor" TagPrefix="tools" %>

  <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Widgets" TagPrefix="widgets" %>

  <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Dialogs" TagPrefix="dialogs" %>

  <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

  <%@ Register Src="~/EditorDialogs/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>

  <uc1:WebUserControl1 runat="server" id="WebUserControl1" />

  <script type="text/javascript">

  ...