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

Creating a Custom Dialog

Custom Dialogs Support

RadImageEditor provides a flexible mechanism for adding custom dialogs that plug directly into the undo/redo mechanism and have the Telerik RadImageEditor look and feel.

The custom ImageEditor dialog is a standard WebUserControl that has to be loaded in the tools panel. Here are the steps to create and add a custom dialog:

  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)
  2. Handle the RadImageEditor's DialogLoading server-side event and load the user control to the tools panel:


    protected void RadImageEditor1_DialogLoading(object sender, ImageEditorDialogEventArgs args)
        if (args.DialogName == "CustomInsertImage")
            args.Panel.Controls.RemoveAt(1);//remove the predefined div


    Protected Sub RadImageEditor1_DialogLoading(ByVal sender As Object, ByVal args As ImageEditorDialogEventArgs)
        If args.DialogName = "CustomInsertImage" Then
            'remove the predefined div
        End If
    End Sub
  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

A full working example of a custom dialog implementation is available in the ImageEditor - Implement Custom Dialog and Insert Image Built-in Dialog Live Demo.

In this article