Dialogs in ASP.NET MVC DOCX Editor

14 Aug 202614 minutes to read

ASP.NET MVC DOCX Editor (Document Editor)provides dialog support for major operations such as inserting or editing a hyperlink, formatting text, paragraph, style, list, and table properties.

Font dialog

The Font dialog allows modifying all text properties for selected content at once such as bold, italic, underline, font size, font color, strikethrough, subscript, and superscript.

NOTE

To enable the Font dialog for a Document Editor instance, set enableFontDialog to true.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableFontDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    var containerPanel;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Font Dialog
            documenteditor.showDialog('Font');
        });
    });
</script>

Document-editor.cs

public ActionResult Default()
{
    return View();
}

Paragraph dialog

This dialog allows modifying the paragraph formatting for a selection at once such as text alignment, indentation, and spacing.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableParagraphDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    var containerPanel;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Paragraph Dialog
            documenteditor.showDialog('Paragraph');
        });
    });
</script>

Table dialog

This dialog allows creating and inserting a table at the cursor position by specifying the required number of rows and columns.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor =  document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Table Dialog
            documenteditor.showDialog('Table');
        });
    });
</script>

Bookmark dialog

This dialog allows you to perform the following operations:

• View all bookmarks.
• Navigate to a bookmark.
• Create a bookmark at the current selection.
• Delete an existing bookmark.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBookmarkDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    var containerPanel;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Bookmark Dialog
            documenteditor.showDialog('Bookmark');
        });
    });
</script>

Hyperlink dialog

This dialog allows editing or inserting a hyperlink at the cursor position.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableHyperlinkDialog(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });
    //Click the Dialog button, the hyperlink dialog will open
    document.getElementById('dialog').addEventListener('click', function () {
        documenteditor.showDialog('Hyperlink');
    });
</script>

Table of contents dialog

This dialog allows creating and inserting a table of contents at the cursor position. If the table of contents already exists at the cursor position, you can customize its properties.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOfContentsDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor = document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open TableOfContents Dialog
            documenteditor.showDialog('TableOfContents');
        });
    });
</script>

Styles dialog

This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of an existing style or create a new style with the help of the Style dialog.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableStylesDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor =  document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Styles Dialog
            documenteditor.showDialog('Styles');
        });
    });
</script>

Style dialog

You can directly use this dialog for modifying any existing style or adding a new style by providing the style name.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor =  document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open Style Dialog
            documenteditor.showDialog('Style');
        });
    });
</script>

List dialog

This dialog allows creating a new list or modifying existing lists in the document.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableListDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor =  document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open List Dialog
            documenteditor.showDialog('List');
        });
    });
</script>

Borders and shading dialog

This dialog allows customizing the border style, border width, and background color of the table or selected cells.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBordersAndShadingDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;    
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor = document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open BordersAndShading Dialog
            documenteditor.showDialog('BordersAndShading');
        });
    });
</script>

Table options dialog

This dialog allows customizing the default cell margins and spacing between each cell of the selected table.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOptionsDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {        
        documenteditor = document.getElementById("container").ej2_instances[0];        
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open TableOptions Dialog
            documenteditor.showDialog('TableOptions');
        });
    });
</script>

Table properties dialog

This dialog allows customizing the table, row, and cell properties of the selected table.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTablePropertiesDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open TableProperties Dialog
            documenteditor.showDialog('TableProperties');
        });
    });
</script>

Page setup dialog

This dialog allows customizing margins, size, and layout options for pages of the section.

CSHTML

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePageSetupDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        var button = document.getElementById('dialog');
        button.addEventListener('click', function () {
            // To open PageSetup Dialog
            documenteditor.showDialog('PageSetup');
        });
    });
</script>

See Also

• Feature module