View in ASP.NET Core DOCX Editor

27 Aug 20262 minutes to read

Web layout

ASP.NET Core DOCX Editor allows you to change the view to either web layout or print using the LayoutType property with the supported LayoutType enum.

<ejs-documenteditor id="container" layoutType="Continuous"></ejs-documenteditor>

Online demo

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

Ruler

The ruler helps you set specific margins, tab stops, or indentations within a document to ensure consistent formatting in the DOCX Editor.

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

<ejs-button id="container_ruler_button" content="Show/hide ruler" onclick="onClick()"></ejs-button>
<ejs-documenteditor id="container">
    <ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
</ejs-documenteditor>

<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 Core DOCX Editor for working with Word documents in this live demo.

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

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

<ejs-documenteditor id="container">
    <ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
</ejs-documenteditor>

<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 Core DOCX Editor in this live demo.