Using RADSpell on a MVC View page

[Michael]

Hi,

I currently have the ASP.NET version of the RadSpell, which uses the Telerik.Web.UI.dll. This is currently used in an exsiting website.

The site is in the process of being upgraded to use MVC, and we want to use the RadSpell functionality.

I have created an .ascx to contain the RadSpellChecker and made some modiications to the web.config file which you can see below. The ascx loads fine in a Html.Partial().

However when javascript hits the startSpellCheck(); I get the following error :

Object doesn't support this property or method

How can I get this working?

ASCX file:

<%@ Control CodeBehind="spellcheck.ascx.cs" Language="C#" AutoEventWireup="true" Inherits="TargetedEmailMVC.Web.Views.BroadcastTemplate.spellcheck" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<script type="text/javascript" language="javascript">
    function spellCheck() {
        var spell = $('#<%= RadSpellChecker1.ClientID %>');
        if (spell != null) {
            spell.startSpellCheck();
        }
    }
</script>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>
<telerik:RadSpell id="RadSpellChecker1" runat="server" buttontype="None" IsClientID="true" HandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"/>

My web.config contains the following:

HttpHandlers:

<httpHandlers>
  <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
  <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>
  <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>
</httpHandlers>

Handlers:

<handlers>
  <remove name="UrlRoutingHandler"/>
  <remove name="WebServiceHandlerFactory-Integrated"/>
  <remove name="ScriptHandlerFactory"/>
  <remove name="ScriptHandlerFactoryAppServices"/>
  <remove name="ScriptResource"/>
  <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>
  <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>
  <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>
  <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add name="ScriptResource" verb="GET,HEAD" path="ScriptResource.axd" preCondition="integratedMode" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add name="UrlRoutingHandler" verb="*" path="UrlRouting.axd" preCondition="integratedMode" type="System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
</handlers>

Thanks

[Rumen]

Hi,

My suggestion is to replace var spell = $('#<%= RadSpellChecker1.ClientID %>'); with
var spell = $find('<%=RadSpellChecker1.ClientID %>');

This line should return a correct reference to RadSpell client-side object.

You can see my test in the following video: http://screencast.com/t/2izIrZQd.


Greetings,
Rumen
the Telerik team

[heyyan]

any chance of getting a sample solution for this

[Slav]

Hi Heyyan,

You can find instructions for integrating RadSpell in MVC in the following help articles:
 - Getting Started;
 - Using RadSpell in ASP.NET MVC;

Regards,
Slav
Telerik

[Jeffrey]

Is there any chance of getting a code sample or a better explanation on how you got this to work.