View in ASP.NET MVC DOCX Editor

27 Aug 20262 minutes to read

Web layout

The DOCX Editor allows you to change the view to web layout using the layoutType property with the supported LayoutType.

@Html.EJS().DocumentEditor("container").LayoutType(Syncfusion.EJ2.DocumentEditor.LayoutType.Continuous).Render()

Online demo

Explore how to view Word documents in web layout using the ASP.NET MVC DOCX Editor in this live demo.

Ruler

The ruler displays the document margins, tab stops, and indentation guides, allowing consistent formatting in the DOCX Editor.

The following example illustrates how to enable the ruler in the DOCX Editor.

<div>
    @Html.EJS().Button("container_ruler_button").Content("Show/Hide Ruler").Click("onClick").Render()
    @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
</div>

<script>
    var container;
    var settings = { showRuler: true };
    function onCreate() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.enableAllModules();
    }
    function onClick() {
       container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
    }
</script>
public ActionResult Default()
{
    return View();
}

Online demo

Explore how to use the ruler in the ASP.NET MVC DOCX Editor for working with Word documents in this live demo.

The heading navigation pane allows users to navigate documents by heading quickly, enhancing their ability to move through the document efficiently.

The following example illustrates how to enable the heading navigation pane in the DOCX Editor.

<div>
    @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
</div>

<script>
    var container;
    var settings = { showNavigationPane: true };
    function onCreate() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.enableAllModules();
    }
</script>
public ActionResult Default()
{
    return View();
}

Online demo

Explore how to navigate through headings in Word documents using the ASP.NET MVC DOCX Editor in this live demo.