This demo illustrates ways in which you can add custom dialogs to the DevExpress MVC HTML Editor. In addition to the built-in dialogs available within the Html Editor, you can use any number of custom dialogs, which can be easily added at both design and runtime. To add custom dialogs to the editor, use its CustomDialogs collection. A custom dialog is represented by an HtmlEditorCustomDialog object, which provides the following settings:
- Caption and Name. Use these properties to specify the dialog's caption and name.
- FormAction. Use this property to provide a path to the user control representing a dialog's form. In this demo, the form contains a Grid View extension bound to the InsertTemplateData.xml file, which provides predefined content templates.
- OkButtonText, OkButtonVisible, CancelButtonText and CancelButtonVisible. These options allow you to specify the visibility and caption of two standard dialog buttons. By default, these buttons are labeled "Ok" and "Cancel". You can customize default button captions as necessary. In this demo, the Ok button's caption is modified to reflect the dialog's functionality.
You can associate a custom dialog with a toolbar item - which when clicked invokes the dialog. To accomplish this, add a ToolbarCustomDialogButton toolbar item to the HTML Editor, and assign the dialog's name to the toolbar item's Name property.
In this demo, you can click the Insert Template button to invoke the custom dialog. Within the dialog, select the desired template and click the Insert button (or simply double click the template) to insert it into the editor. You may de-activate the dialog's "Overwrite content" option in order to preserve current content when inserting templates.
The MVC HTML Editor offers events that allow you to respond to end-user actions within custom dialogs and dialog button clicks on the client side. Events include:
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).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxHTMLEditorDemos