How to reset the toolbar each time the application is reopened in Blazor PDF Viewer

How to Reset the Toolbar Each Time the Application is Reopened in Blazor PDF Viewer

Description:

This article explains how to reset the toolbar in Syncfusion’s Blazor PDF Viewer every time the PDF viewer is reopened. You can ensure that the toolbar resets to its original state, even after closing and reopening the application or the PDF viewer. This guide will help you configure the toolbar behavior programmatically using Syncfusion’s Blazor PDF Viewer.

Solution:

When using the Syncfusion Blazor PDF Viewer component, you may need to reset the toolbar to its default or a custom state every time the viewer is opened. This can be done by redefining the toolbar items or settings when the viewer is re-initialized. The approach involves listening to events such as Created or Opened and using Toolbar Settings to redefine the toolbar configuration.

Prerequisites:

1. Syncfusion Blazor PDF Viewer Setup: Ensure you have installed and set up the Syncfusion Blazor PDF Viewer component in your Blazor project. If you haven’t already done so, you can follow the Syncfusion Blazor PDF Viewer - Getting Started guide.
2. Basic Knowledge of Blazor: Familiarity with Blazor components, how to bind events, and handle component references will be helpful in implementing this solution.

Code Snippet:

Use the following code to reset the toolbar each time the PDF viewer is reopened.

@page "/"
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
<br />
<br />
<div id="target" style="width:800px;height:500px">
    <SfButton @onclick="OnClick">Open PDF Viewer</SfButton>
    <SfDialog @ref="SampleDialog"
              Target="#target"
              Width="100%"
              Height="100%"
              Visible="false"
              IsModal="true"
              Header="@Header"
              ShowCloseIcon="true">
        <DialogTemplates>
            <Content>
                @if (isDialogOpended)
                {
                    <div>
                        <SfPdfViewer2 @ref="SampleDialog2Viewer" Width="100%" Height="100%">
                            <PdfViewerEvents Created="OnOpen"></PdfViewerEvents>
                        </SfPdfViewer2>
                    </div>
                }
            </Content>
        </DialogTemplates>
        <DialogEvents Opened="OnOpen" Closed="OnClose"></DialogEvents>
    </SfDialog>
</div>

@code {
    private SfDialog SampleDialog;
    private SfPdfViewer2 SampleDialog2Viewer;
    private string Header = "PDF Viewer";
    private bool isDialogOpended { get; set; } = false;
    private string DocumentPath { get; set; } = "wwwroot/PDF_Succinctly_Landscape 2.pdf";
    SfDialog? DocumentoDialog;
    public bool Documentoflag = true;
    // Custom toolbar items to be set when the dialog opens
    List<Syncfusion.Blazor.SfPdfViewer.ToolbarItem> ToolbarItemsSPF;
    private async Task OnClick()
    {
        if (Documentoflag)
        {
            // Define the toolbar items on button click
            ToolbarItemsSPF = new List<Syncfusion.Blazor.SfPdfViewer.ToolbarItem>()
            {
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PageNavigationTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.MagnificationTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PanTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.CommentTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.AnnotationEditTool,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.DownloadOption,
                Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption
            };
            await SampleDialog.ShowAsync();
            Documentoflag = false;
        }
        isDialogOpended = true;
    }

    private async void OnOpen()
    {
        // Reset toolbar items whenever the dialog is opened
        Documentoflag = false;
        isDialogOpended = true;
        
        // Reload the PDF in the viewer
        await SampleDialog2Viewer.LoadAsync(DocumentPath, password: null);
    }

    private async void OnClose()
    {
        Documentoflag = true;
        isDialogOpended = false;
        
        // Unload the PDF when the dialog is closed
        await SampleDialog2Viewer!.UnloadAsync();
    }

    List<ToolbarItem> ToolbarItems = new List<ToolbarItem>()
    {
        ToolbarItem.OpenOption,
        ToolbarItem.PageNavigationTool,
        ToolbarItem.SelectionTool,
        ToolbarItem.MagnificationTool,
        ToolbarItem.PanTool,
        ToolbarItem.UndoRedoTool,
        ToolbarItem.CommentTool,
        ToolbarItem.AnnotationEditTool,
        ToolbarItem.SearchOption,
        ToolbarItem.DownloadOption,
        ToolbarItem.PrintOption,
    };
}

Key Features Used in the Code:

1. SfPdfViewer2: The Syncfusion Blazor PDF Viewer component used to display PDF documents.
2. PdfViewerEvents: The Created event is triggered when the viewer is created, which can be used to reset the toolbar settings when the viewer is initialized.
3. ToolbarItemsSPF: This list contains the toolbar items that will be visible in the viewer. It is redefined every time the dialog is opened, ensuring the toolbar is reset.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article has guided you on reset the toolbar each time the application is reopened in Blazor PDF Viewer. By following these steps, you can easily reset the toolbar each time the application is reopened.

You can refer to Blazor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!