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.