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

Implement Custom Dialog and Insert Image Built-in Dialog

  • Insert Image
  • CustomInsertImage
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

This example demonstrates two of the new features of RadImageEditor - InsertImage built-in functionality and the support for custom dialogs.

You can easily insert another image to the currently edited one using RadImageEditor's built-in InsertImage dialog. It offers the possibility to insert an image from a provided live URL (it should be accessible from the application) with specified size and position. The inserted image will be placed on top of the current image, and if it has transparent parts, the original image will be displayed through them. This approach is used for the custom dialog to add a frame to the image.

Implement Custom Dialog

In this example you can find how to implement a custom dialog to the ImageEditor. The custom image editor's dialog is a standard WebUserControl that has to be loaded in the tools panel.

To implement a custom dialog please use the following approach:

  1. Add a custom button to the RadImageEditor's toolbar and in its command implementation call executeCommand() method:
    Telerik.Web.UI.ImageEditor.CommandList["CustomInsertImage"] = function(imgEditor, commandName, args)
    {
        imgEditor.executeCommand("CustomInsertImage");
    };
  2. Handle the RadImageEditor's DialogLoading server-side event and load the user control to the tools panel:
    protectedvoidRadImageEditor1_DialogLoading(objectsender, ImageEditorDialogEventArgs args)
    {
        if(args.DialogName == "CustomInsertImage")
        {
            args.Panel.Controls.RemoveAt(1);//remove the predefined div
            args.Panel.Controls.Add(LoadControl("~/ImageEditor/Examples/CustomDialogInsertImage/CustomInsertImageDialog.ascx"));
        }
    }
  3. The user control should register a client-side class with the same name as the custom command. This client-side class should implement Telerik.Web.UI.RadImageEditor.IToolWidget interface with the following structure:
    Telerik.Web.UI.IToolWidget = function(){}
    Telerik.Web.UI.IToolWidget.prototype =
    {
        updateUI: function(){},     //updates the controllers (such us sliders, textboxes and etc.) on the ToolWidget
        get_name: function(){},     //the name of the tool widget used for identification
        onOpen: function(){},           //the event handler for the close event of the tool panel
        onClose: function(){}           //the event handler for the close event of the tool panel
    };
    Telerik.Web.UI.IToolWidget.registerInterface("Telerik.Web.UI.ImageEditor.IToolWidget");

In the example we are also inheriting a base class Telerik.Web.UI.ToolWidget which provides common methods like get_imageEditor() that returns a reference to the current ImageEditor's client-side object.

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

<!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" />
</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>
    <div class="demo-container size-wide">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg" Width="790px"
            OnDialogLoading="RadImageEditor1_DialogLoading">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="InsertImage"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="CustomInsertImage"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance