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

Client-side Events

  • Print Image
  • Save Image
  • Export Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Resize
  • Zoom
    • Zoom
    • Zoom In
    • Zoom Out
  • Opacity
  • Rotate
    • Rotate
    • Rotate Right by 90 deg
    • Rotate Left by 90 deg
  • Flip
    • Flip
    • Flip Vertically
    • Flip Horizontally
  • Add Text
  • Insert Image
  • Brightness/Contrast
    • Brightness/Contrast
    • Hue/Saturation
    • Blur
    • Sharpen
    • Greyscale
    • Sepia
    • Invert Colors (negative)
  • Pencil
    • Pencil
    • Line
    • DrawRectangle
    • DrawCircle
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
Event log

RadImageEditor provides a rich set of client-side events which allow easy and flexible use in a wide range of application scenarios. Many of the events are cancelable giving you the possibility to cancel any operation performed on the image.

  • OnClientLoad - raised when the control is initialized.
  • OnClientCommandExecuting - raised when the user fires a command of the control. The event can be canceled.
  • OnClientCommandExecuted - raised after the user fires a command of the control. The event is subsequent to the OnClientCommandExecuting event.
  • OnClientImageChanging - raised when the user initiates an action on the image. The event can be canceled.
  • OnClientImageChanged - raised after the image has changed. The event is fired after OnClientImageChanging event.
  • OnClientResizeStart - raised when the user starts resizing the control.
  • OnClientResizeEnd - raised when the user has finished resizing the control.
  • OnClientSaving - raised when the user starts saving the changes on the image. The event can be canceled.
  • OnClientSaved - raised after the user has saved the image.
  • OnClientToolsDialogClosed - raised when the tool's dialog is closed (if opened).
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ImageEditor.ClientEvents.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></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-wide">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg"
            Height="430px" Width="780px" OnClientLoad="OnClientLoad" OnClientCommandExecuting="OnClientCommandExecuting"
            OnClientCommandExecuted="OnClientCommandExecuted" OnClientImageChanging="OnClientImageChanging"
            OnClientImageChanged="OnClientImageChanged" OnClientResizeStart="OnClientResizeStart"
            OnClientResizeEnd="OnClientResizeEnd" OnClientSaving="OnClientSaving" OnClientSaved="OnClientSaved"
            OnClientToolsDialogClosed="OnClientToolsDialogClosed">
        </telerik:RadImageEditor>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" Height="300px"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance