Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ImageEditor / Client-side Events

100%0x0px(-,-)None

Clear log Event log:

  • Client-Side Events

    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).

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="true" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableScriptCombine="false" />
        <script type="text/javascript">
            //<![CDATA[
            function OnClientLoad(sender, eventArgs)
            {
                logEvent("Load event: <strong>RadImageEditor</strong> is loaded.");
            }
            function OnClientCommandExecuting(sender, eventArgs)
            {
                logEvent("CommandExecuting event: Command: '<strong>" + eventArgs.get_commandName() + "</strong>' was fired.");
                eventArgs.set_cancel(!confirm("Execute Command: " + eventArgs.get_commandName() + "?"));
            }
            function OnClientCommandExecuted(sender, eventArgs)
            {
                logEvent("CommandExecuted event: Command '<strong>" + eventArgs.get_commandName() + "</strong>' was executed.");
            }
            function OnClientImageChanging(sender, eventArgs)
            {
                logEvent("ImageChanging event: Image Operation '<strong>" + eventArgs.get_commandName() + "</strong>' was fired.");
            }
            function OnClientImageChanged(sender, eventArgs)
            {
                var text = eventArgs.get_imageOperation() ? eventArgs.get_imageOperation().get_text() : eventArgs.get_commandName();
                logEvent("ImageChanged event: Image Operation '<strong>" + text + "</strong>' was applied to the image.");
            }
            function OnClientResizeStart(sender, eventArgs)
            {
                logEvent("ResizeStart event: The resizing on the ImageEditor has started.");
            }
            function OnClientResizeEnd(sender, eventArgs)
            {
             logEvent("ResizeEnd event: The resizing on the ImageEditor has ended.");
            }
            function OnClientSaving(sender, eventArgs)
            {
                logEvent("Saving event: The user started saving the changes! Save action: <strong>" + eventArgs.get_saveAction() + "</strong>");
            }
            function OnClientSaved(sender, eventArgs)
            {
                var fName = eventArgs.get_fileName() ? eventArgs.get_fileName() : "<i>No file name specified</i>";
                logEvent("Saved event: The image was saved successfully! File name: <strong>" + fName + "</strong>.");
            }
            function OnClientToolsDialogClosed(sender, eventArgs)
            {
                logEvent("ToolsDialogClosed event: The tool's dialog was closed!");
            }
            //]]>
        </script>
        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg"
            Height="430px" Width="720px"
            OnClientLoad="OnClientLoad"
            OnClientCommandExecuting="OnClientCommandExecuting"
            OnClientCommandExecuted="OnClientCommandExecuted"
            OnClientImageChanging="OnClientImageChanging"
            OnClientImageChanged="OnClientImageChanged"
            OnClientResizeStart="OnClientResizeStart"
            OnClientResizeEnd="OnClientResizeEnd"
            OnClientSaving="OnClientSaving"
            OnClientSaved="OnClientSaved"
            OnClientToolsDialogClosed="OnClientToolsDialogClosed"
            >
        </telerik:RadImageEditor>
        <br />
        <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" Height="300px" />
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451