View in Blazor DocumentEditor component

17 Oct 20251 minute 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.

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 };   
}

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};
}