New to Telerik UI for ASP.NET AJAXStart a 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:

    JavaScript
     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:

    C#
     protected void RadImageEditor1_DialogLoading(object sender, 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"));
         }
     }
    VB
     Protected Sub RadImageEditor1_DialogLoading(ByVal sender As Object, ByVal args As ImageEditorDialogEventArgs)
         If args.DialogName = "CustomInsertImage" Then
             args.Panel.Controls.RemoveAt(1)
             'remove the predefined div
             args.Panel.Controls.Add(LoadControl("~/ImageEditor/Examples/CustomDialogInsertImage/CustomInsertImageDialog.ascx"))
         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:

    JavaScript
     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");

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
Custom Dialogs Support
Not finding the help you need?
Contact Support