Editor - Spellcheck Validation

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadSpell control can be extended with a SpellCheckValidator that will provide functionality similar to a RequiredFieldValidator - postbacks will not be allowed if the RadSpell does not pass through the content without issues.

In this case the RadSpell's button is hidden via CSS and the AjaxSpellCheck command of the RadEditor is overriden to invoke the spellcheck instead. This is done to improve the user experience and avoid having another button. Thsi can be achieved with a custom command for the RadEditor or simply by leaving the RadSpell button available for all other cases.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Spell.SpellcheckValidator.DefaultCS" %>

<%@ 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>
    <link rel="Stylesheet" href="Styles.css" />
</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">
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="valsum">
        </asp:ValidationSummary>
        <telerik:SpellCheckValidator runat="server" ID="SpellCheckValidator1" ControlToValidate="RadSpell1"
            ErrorMessage="Please run a spell check to ensure the quality of the text!" Display="Dynamic">
        </telerik:SpellCheckValidator>
        <telerik:RadSpell RenderMode="Lightweight" ID="RadSpell1" runat="server" ControlToCheck="RadEditor1" ButtonType="PushButton"
            Style="display: none;"></telerik:RadSpell>
        <script type="text/javascript">
            //The default command is overriden to integrate the standalone RadSpell and SpellCheckValidator controls
            Telerik.Web.UI.Editor.CommandList.AjaxSpellCheck = function (commandName, editor) {
                var spell = $find("<%=RadSpell1.ClientID %>");
                spell.startSpellCheck();
                return false;
            }
        </script>
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="500px" Height="200px" EditModes="Design"
            ContentAreaCssFile="Styles.css">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertLink"></telerik:EditorTool>
                    <telerik:EditorTool Name="Unlink"></telerik:EditorTool>
                    <telerik:EditorTool Name="AjaxSpellCheck"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <Content>
        Somee exemple misspelld content for the post.
            </Content>
        </telerik:RadEditor>
        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Submit">
        </telerik:RadButton>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?