Custom Dialogs

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:

• CustomDialogOpened. You can handle this event to initialize a custom dialog. In the demo, the OnCustomDialogOpened JavaScript function represents the CustomDialogOpened event handler. This function calls the RestoreInsertTemplateFormDialogState function to focus the recently selected template in the dialog and restore the checked state of the "Overwrite content" option.
• CustomDialogClosing. You can handle this event to respond to closing a custom dialog (initiated via a click on a dialog button or the header's close button). To identify a dialog and an element being clicked, use the event parameter's name and status properties. To prevent default processing when closing a dialog, assign true to the event parameter's handled property. In this demo, the OnCustomDialogClosing JavaScript function represents the CustomDialogClosing event handler. This function retrieves the selected template's text when the Insert dialog button is clicked (it's the Ok dialog button labeled "Insert"), and closes the dialog via a CustomDialogComplete method call. Since the dialog is closed programmatically, the function prevents the default closing of the dialog. Note that you can also double click a template to select it, and close the dialog. This is accomplished by handling the RowDblClick client event of the GridView extension use within the dialog (see the OnGridRowDblClick function).
• CustomDialogClosed. You can handle this event to perform specific actions based upon the dialog button that has been clicked or any other suitable condition. In this demo, the OnCustomDialogClosed JavaScript function represents the CustomDialogClosed event handler. This function inserts the selected template's text into the editor after pressing the dialog's Insert button or double-clicking the template. In addition, this function calls the SaveInsertTemplateFormDialogState function to store the dialog's selected template and the checked state of the "Overwrite content" option for future use.