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:
-
Add a custom button to the RadImageEditor's toolbar and in its command implementation call executeCommand() method:
JavaScriptTelerik.Web.UI.ImageEditor.CommandList["CustomInsertImage"] = function (imgEditor, commandName, args) { imgEditor.executeCommand("CustomInsertImage"); };
-
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")); } }
VBProtected 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
-
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:
JavaScriptTelerik.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.