View in Blazor DocumentEditor component

19 Jun 20262 minutes to read

This topic describes view-related options in the Document Editor, including layout type (Pages or Continuous), displaying the ruler, and enabling the heading navigation pane.

Web Layout

Blazor Word Processor component (Document Editor) component allows you to change the view to web layout and print using the layoutType property with the supported LayoutType.

<SfDocumentEditorContainer @ref="editor" EnableToolbar="true" Height="590px" LayoutType="LayoutType.Continuous">
</SfDocumentEditorContainer>

NOTE

The Default value of LayoutType in the DocumentEditorContainer component is Pages.

Online Demo

Explore how to view Word documents in web layout using the Blazor Document Editor in this live demo here.

Show Ruler

The ruler helps set margins, tab stops, and indentations to maintain consistent formatting in the Document Editor Container.

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

<div>
    <SfDocumentEditorContainer @ref="container" EnableToolbar=true Height="590px" DocumentEditorSettings="@settings">      
    </SfDocumentEditorContainer>    
</div>

@code {
    SfDocumentEditorContainer container;
    public DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { ShowRuler = true };   
}

Online Demo

Explore how to use the ruler in the Blazor Document Editor for working with Word documents in this live demo here.

Heading Navigation Pane

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 demonstrates how to enable the heading navigation pane in a Document Editor.

<SfDocumentEditorContainer @ref="container" Height="590px" DocumentEditorSettings="settings">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { ShowNavigationPane = true};
}

Online Demo

Explore how to navigate through headings in Word documents using the Blazor Document Editor in this live demo here.