How to Reset the Toolbar when the Application is in Blazor PDF Viewer?

6 mins read

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 reinitialized. The approach involves listening to events such as Created or Opened and using toolbar settings to redefine the toolbar configuration.

Prerequisites:

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.
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:

SfPdfViewer2: The Syncfusion Blazor PDF Viewer component used to display PDF documents.
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.
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:

We hope this article has guided you on how to reset the toolbar in the Blazor PDF Viewer.

You can refer to Blazor Pdf Viewer feature tour page to learn about its other groundbreaking features, 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, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor PDF Viewer and other Blazor components.

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

Did you find this information helpful?

Yes

Comments (0)