|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: Layout type in in Blazor DocumentEditor Component | Syncfusion |
4 | | -description: Checkout and learn here all about change layout type in Syncfusion Blazor DocumentEditor component and much more. |
| 3 | +title: Change Document View Type in Blazor DocumentEditor | Syncfusion |
| 4 | +description: Learn how to change the document view between Print Layout (Pages) and Web Layout (Continuous) in the Syncfusion Blazor DocumentEditor component. |
5 | 5 | platform: document-processing |
6 | 6 | control: DocumentEditor |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | | -# Change document view in Blazor DocumentEditor Component |
| 10 | +# Change Document View in Blazor DocumentEditor |
11 | 11 |
|
12 | | -[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component allows you to change the view to web layout and print using the [`layoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#fields) property with the supported [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html). |
| 12 | +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) (Document Editor) provides two different layout options for viewing a document, controlled by the `LayoutType` property. This allows users to switch between a print-optimized view and a continuous web-based view. |
13 | 13 |
|
14 | | -```typescript |
15 | | -<SfDocumentEditorContainer @ref="editor" EnableToolbar="true" Height="590px" LayoutType="LayoutType.Continuous"> |
| 14 | +The two available layout types are: |
| 15 | + |
| 16 | +* **Pages (Print Layout)**: This is the default view. It displays the document as a series of distinct pages, exactly as it would appear when printed. This layout is ideal for understanding the document's structure, including headers, footers, and page breaks. |
| 17 | +* **Continuous (Web Layout)**: This view displays the document as a single, continuous flowing page without any page breaks. This is similar to how a standard web page is rendered and is useful for continuous reading and editing without the interruption of page boundaries. |
| 18 | + |
| 19 | +## Setting the Layout Type |
| 20 | + |
| 21 | +The layout type can be set during component initialization. The following example demonstrates how to configure the Document Editor to use the `Continuous` (Web Layout) view. |
| 22 | + |
| 23 | +``` |
| 24 | +@using Syncfusion.Blazor.DocumentEditor |
| 25 | +<SfDocumentEditorContainer @ref="Container" EnableToolbar="true" Height="590px" LayoutType="LayoutType.Continuous"> |
16 | 26 | </SfDocumentEditorContainer> |
| 27 | +
|
17 | 28 | ``` |
18 | 29 |
|
19 | | -N> Default value of [`LayoutType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html?_ga=2.86979928.1792501268.1670214760-93590999.1630704258) in DocumentEditorContainer component is [`Pages`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.LayoutType.html#Syncfusion_Blazor_DocumentEditor_LayoutType_Pages). |
| 30 | +N> By default, the `LayoutType` is set to `LayoutType.Pages`, which provides a print layout view. To switch to a web layout, set the property to `LayoutType.Continuous`. |
0 commit comments