Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Dialog Customization

  • Undo (Ctrl+Z)
  • Redo (Ctrl+Y)
  • Bold (Ctrl+B)
  • Underline
  • Italic (Ctrl+I)
  • Strikethrough
  • Insert Link (Ctrl+K)

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.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxHTMLEditorDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxHTMLEditorDemos