Dialog Customization

This demo illustrates how to customize and extend default ASPxHtmlEditor's dialogs using client-side API.

In this demo, the Insert Link dialog is modified to let a user select a style for the link (simple link, external link, button link). To change the look and layout of the Insert Link dialog, use the TopAreaTemplate and BottomAreaTemplate templates. Use the e.dialog property on the DialogInitialized, DialogClosing, and DialogClosed client-side events to access standard dialog editors located in the dialog. For the Insert Link dialog, the e.dialog property value is of the ASPxClientHtmlEditorInsertLinkDialog type.

Use the DialogClosing client-side event to validate and change the dialog's command arguments before passing it to the command (for example ASPxClientCommandConsts.INSERTLINK_COMMAND). To change dialog command arguments, use the e.parameter property (for the Insert Link dialog, the e.parameter property value is of the ASPxClientHtmlEditorInsertLinkCommandArguments type). To prevent dialog closing, handle the DialogClosing cliet-side event and set e.cancel = true.