Spell - Custom Text Source

Spellchecking a text area and placing the corrected text in a different control.

before:

after:

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSpell is not limited to spellchecking html elements only.  You can define a custom text source, that can provide text for RadSpell to spell check.

You need to define a JavaScript object with two methods: get_text() and set_text(param):

function VariableSpellSource() {
    this.get_text = function() {
        return "colourful mistakrn texr";
    }
 
    this.set_text = function(newValue) {
        alert("The corrected text is: " + newValue);
    }
}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Spell.TextSource.DefaultCS"Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <script type="text/javascript">
            function DifferentControlsSource() {
                this.get_text=function() {
                    return $get('before').value;
                }

                this.set_text=function(newValue) {
                    $get('after').value=newValue;
                }
            }
            var clientTextSource=new DifferentControlsSource();
        </script>
        <div>
            <p>Spellchecking a text area and placing the corrected text in a different control.</p>
            <p><em>before:</em></p>
            <textarea id="before" style="width:100%; height:100px;">Some mistakrn taxt</textarea>
        </div>
        <div>
            <p><em>after:</em></p>
            <textarea id="after" style="width:100%; height:100px;"></textarea>
        </div>
        <telerik:RadSpell RenderMode="Lightweight" ID="spell2" runat="server" ClientTextSource="clientTextSource"
            ButtonText="Spellcheck and save to a different control"></telerik:RadSpell>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?