New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

How to load external jQuery in RadSpell

Updated over 6 months ago

Environment

Product

RadSpell for ASP.NET AJAX

Description

Check out below, how to load an external version of jQuery in RadSpell.

Solution

Here are the steps to import a different from the default version of jQuery:

Disable the embedded jQuery by adding the following entry in the web.config file

web.config

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

Apply the Telerik.Web.UI.RadDialogOpener.prototype.open override to be able to import the jQuery from the main page into the iframe based dialog of RadSpell:

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.12.2.min.js"></script>
</head>

<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server">
            <Scripts>
                <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>

        <asp:TextBox runat="server" ID="TextBox1" Text="behaviour" />
        <telerik:RadSpell ID="spell1" runat="server" ControlToCheck="TextBox1" />
        <script>
            Telerik.Web.UI.RadDialogOpener.prototype.originalOpen = Telerik.Web.UI.RadDialogOpener.prototype.open;
            Telerik.Web.UI.RadDialogOpener.prototype.open = function (dialogName, clientParameters, callbackFunction) {
                if (!this._handlerChecked) {
                    this._checkDialogHandler(this.get_handlerUrl());
                }

                var container = this._getDialogContainer(dialogName);
                if (container && container.add_beforeShow) {
                    container.add_beforeShow(function (radWnd) {
                        var contentWindow = radWnd.GetContentFrame().contentWindow;
                        contentWindow.jQuery = contentWindow.jQuery || window.jQuery;
                    });
                }

                this.originalOpen(dialogName, clientParameters, callbackFunction);
            }
        </script>
    </form>
</body>
</html>