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

Client-side Events

  • 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
Event log
  • Demo Configurator

Change to Inline Mode

(Inline Editing mode will enable you to examine the OnClientInlineEditCompleted event.)

RadEditor provides a rich client-side event model. You can attach custom client-script code (JavaScript) to a number of client-side events fired by the editor. All client-side events are exposed as string properties to the RadEditor instance with the value being the name of the JavaScript function to be called.

Below is a list of all client-side events that are currently supported by RadEditor:

Events

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ClientsideEvents.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script 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-custom">

        <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" Width="850px" SkinID="DefaultSetOfTools"
            OnClientLoad="TelerikDemo.OnClientLoad"
            OnClientCommandExecuted="TelerikDemo.OnClientCommandExecuted"
            OnClientCommandExecuting="TelerikDemo.OnClientCommandExecuting"
            OnClientSelectionChange="TelerikDemo.OnClientSelectionChange"
            OnClientModeChange="TelerikDemo.OnClientModeChange"
            OnClientSubmit="TelerikDemo.OnClientSubmit"
            OnClientDomChange="TelerikDemo.OnClientDomChange"
            OnClientInit="TelerikDemo.OnClientInit"
            OnClientInlineEditCompleted="TelerikDemo.OnClientInlineEditCompleted"
            OnClientPasteHtml="TelerikDemo.OnClientPasteHtml" EditType="Normal">
            <Content>
                <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
                <ul>
                    <li><em>Single-file, drag-and-drop deployment</em></li>
                    <li><em>Built on top of ASP.NET AJAX</em></li>
                    <li><em>Unmatched loading speed with new semantic rendering </em></li>
                    <li><em>Full keyboard accessibility</em></li>
                    <li><em>Flexible Skinning mechanism</em></li>
                    <li><em>Simplified and intuitive toolbar configuration</em></li>
                    <li><em>Out-of-the-box XHTML-enabled output</em></li>
                </ul>
            </Content>
        </telerik:RadEditor>

        <div class="margin-top-bottom"></div>

        <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Submit" Width="100px"></telerik:RadButton>
    </div>

    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>

    <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="EditTypeChooser">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="EditTypeChooser" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:RadioButtonList runat="server" ID="EditTypeChooser" Orientation="Horizontal"
                    Label="Change to Inline Mode" OnTextChanged="EditTypeChooser_TextChanged" AutoPostBack="true">
                    <asp:ListItem Selected="True" Text="Normal" />
                    <asp:ListItem Text="Inline" />
                </qsf:RadioButtonList>
                <span>(<strong>Inline Editing</strong> mode will enable you to examine the <strong>OnClientInlineEditCompleted</strong> event.)</span>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance