View in DocumentEditor

19 Jun 20262 minutes to read

Web Layout

DocumentEditor allows to change the view to web layout and print 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 Document Editor in this live demo here.

Ruler

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.

The following example illustrates how to enable ruler in Document 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 Document Editor for working with Word documents in this live demo here.

Using 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 heading navigation pane in Document 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 Document Editor in this live demo here.