Spell - Client-side Events




Event output:

Event log

Demo Configurator

Attach to events:





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

RadSpell exposes the following client-side events:

  • OnClientCheckStarted
  • OnClientCheckFinished
  • OnClientCheckCancelled
  • OnClientDialogClosed

The JavaScript event handlers that will be called when these events occur must have two parameters:

  • sender -- a reference to a RadSpell object
  • args -- an object, containing more information about the event

For example:

function spellCheckFinished(sender, args) {
    alert('The spell check is finished!');
    //Suppress the default spellcheck complete message:
    args.suppressCompleteMessage(true);
    //....
}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Spell.ClientSideEvents.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <script type="text/javascript" src="Scripts.js"></script>
</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">
        <textarea id="text1" style="width:100%; height:100px">thoze are som mistaeks.</textarea><br />
        <br />
        <telerik:RadSpell RenderMode="Lightweight" ID="spell1" runat="server" ControlToCheck="text1" IsClientID="true"></telerik:RadSpell>
        <br />
        <strong>Event output:</strong><br />
        <qsf:EventLogConsole ID="EventsOutput" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </div>

    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <span class="text"><strong>Attach to events:</strong></span><br />
                <asp:CheckBox ID="CheckStarted" runat="server" CssClass="text" Text="CheckStarted"
                    Checked="True"></asp:CheckBox><br />
                <asp:CheckBox ID="CheckFinished" runat="server" CssClass="text" Text="CheckFinished"
                    Checked="True"></asp:CheckBox><br />
                <asp:CheckBox ID="CheckCancelled" runat="server" CssClass="text" Text="CheckCancelled"
                    Checked="True"></asp:CheckBox><br />
                <asp:CheckBox ID="DialogClosed" runat="server" CssClass="text" Text="DialogClosed"
                    Checked="True"></asp:CheckBox><br />
                <br />
                <asp:Button ID="ApplyFilter" runat="server" Text="Apply" CssClass="button"></asp:Button>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?