Insert page number and navigate to page in Blazor Document Editor

1 Oct 20252 minutes to read

You can insert page number and navigate to specific page in Blazor Document Editor component by following ways.

Insert page number

The InsertFieldAsync API in Editor module is used to insert the Page number in current position. By default, Page number will insert in Arabic number style.

NOTE

Currently, Document Editor have options to insert page number at current cursor position.

The following example code illustrates how to insert page number in header.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To move the selection to header
        await container.DocumentEditor.Selection.GoToHeaderAsync();
        // Insert page number in the current cursor position
        await container.DocumentEditor.Editor.InsertFieldAsync("PAGE \\* MERGEFORMAT", "1");
    }
}

Get page count

The GetPageCountAsync API is used to get the total number of pages in Document.

The following example code illustrates how to get the number of pages in Document.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To get the total number of pages
        Task<int> pageCount = container.DocumentEditor.GetPageCountAsync();
    }
}

Navigate to specific page

Use the GoToPageAsync API in the Selection module to move the selection to the start of the specified page number.

The following example code illustrates how to move selection to specific page.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To move selection to page number 2
        await container.DocumentEditor.Selection.GoToPageAsync(2);
    }
}