ImageEditor - Custom Server Commands

The CanvasMode property of the ImageEditor must be set to "No" in order to make the Server-side events work properly.
  • Undo
  • Redo
  • Make GrayscaleMakeGrayscale
  • Round CornersRoundCorners
  • Insert WaterMarkWaterMark
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadImageEditor allows its built-in OnImageEditing server-side event to handle the server-side execution of custom commands you have added to its toolbar. By using this you can also override the behavior of the built-in commands or add some custom functionality to them.

In order to use a custom command you need to first add its handler in the JavaScript. To send the command to the server you need to call the control's editImageOnServer JavaScript method.

The handler for the command receives three parameters which are common for all custom client-side commands:

  • imageEditor - the instance of the RadImageEditor whose command is fired
  • commandName - the name of the command as declared in the custom tool's CommandName property
  • args - an event arguments object that exposes the following two methods:
    • get_item() - the toolbar button that was clicked
    • get_domEvent() - the DOM event of the click

The editImageOnServer() method takes four arguments:

  • commandName - the command name that will be passed to the server and respective client events. It should be unique
  • commandText - the command text that will be used to record the operation in the Undo/Redo stack. If nothing is passed the commandName will be used
  • customArgument - additional command argument that will be passed to the server. By default it is an empty string. You can set it dynamically in order to transfer some information from the client
  • callbackFunction - the JavaScript function that is executed when the response from the server is received. It takes two arguments:
    • clientData - the same data that was originally sent from the client to the server
    • serverData - the data object that comes from the server. This is where you can read the argument which is modified on the server - it is contained in the args field of the serverData object

The OnImageEditing server-side handler receives two arguments - one is of type object and is the RadImageEditor instance and the second is of type Telerik.Web.UI.ImageEditorEditingEventArgs and contains the information passed from the client as well as the Image itself.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ImageEditor.CustomServerCommands.DefaultCS" %>

<!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 href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        The <strong>CanvasMode</strong> property of the ImageEditor must be set to <strong>"No"</strong> in order to make the Server-side events work properly.
    </qsf:MessageBox>
    <div class="demo-container size-medium">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/logo.png" 
            CanvasMode="No" OnImageEditing="RadImageEditor1_ImageEditing" Width="590px" Height="330px" Skin="Silk">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorToolStrip CommandName="Undo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorToolStrip CommandName="Redo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="MakeGrayscale" ToolTip="Make Grayscale" ImageUrl="images/bw.png"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RoundCorners" ToolTip="Round Corners" ImageUrl="images/rounded.png"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="WaterMark" ToolTip="Insert WaterMark" ImageUrl="images/watermark.png"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?