PdfViewer toolbar within sfDialog disappearing when control clicked

[MrTayeb]

When I use a Pdfviewer within Dialog, the toolbar disappears when I click on the control!!

code example and screenshot:

<button type="button" @onclick="clicked">Open PDF</button>
<SfDialog Target="#target" IsModal="true" @ref="sfDialog" Width="1060px" ShowCloseIcon="true" Visible="false">
    <DialogEvents OnOpen="openmodel" OnClose="closedialog"></DialogEvents>
    <DialogTemplates>
        <Header>Attachments</Header>
        <Content>
         <SfPdfViewerServer ToolbarSettings="@ToolbarSettings" Width="100%" Height="700px" ZoomValue="75" @ref="viewer">
             <PdfViewerEvents DocumentLoaded="DocumentLoaded"></PdfViewerEvents>
         </SfPdfViewerServer>
         </Content>
         </DialogTemplates>
</SfDialog>


@code {
    public SfPdfViewerServer? viewer { get; set; }
    public SfDialog? sfDialog { get; set; }
    private string? DocumentPath { get; set; } = "wwwroot/MOI_S4_ patterns_V1.pdf";
    private string? docfl="";


    public PdfViewerToolbarSettings ToolbarSettings = new PdfViewerToolbarSettings()
    {
        ToolbarItems = new()
        {
            Syncfusion.Blazor.PdfViewer.ToolbarItem.PageNavigationTool,
            Syncfusion.Blazor.PdfViewer.ToolbarItem.MagnificationTool,
            Syncfusion.Blazor.PdfViewer.ToolbarItem.SearchOption,
            Syncfusion.Blazor.PdfViewer.ToolbarItem.PrintOption,
            Syncfusion.Blazor.PdfViewer.ToolbarItem.DownloadOption
        }
    };


    private async Task openmodel(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args)
    {
        await viewer!.LoadAsync(docfl, null);


    }


    private async Task closedialog(BeforeCloseEventArgs args)
    {
        await viewer!.UnloadAsync();
    }


    public async void clicked()
    {
        byte[] byteArray = System.IO.File.ReadAllBytes(DocumentPath!);
        string base64String = Convert.ToBase64String(byteArray);
        docfl= "data:application/pdf;base64," + base64String;
        await InvokeAsync(async () => await sfDialog!.ShowAsync());
    }


    private async Task DocumentLoaded(LoadEventArgs args)


    {
        await viewer!.UpdateViewerContainerAsync();


    }
}

[Visvesvar Venkatesan]

It seems the PDF Viewer component is rendered before the dialog got displayed.  Render the PDF Viewer once the dialog will get open.  I have We have added the created event to load the document.

Kindly find the code changes below.

Code snippet:

<Content>

            @if (canShowViewer)

            {

                <SfPdfViewerServer ToolbarSettings="@ToolbarSettings" Width="100%" Height="700px" ZoomValue="75" @ref="viewer">

                    <PdfViewerEvents DocumentLoaded="DocumentLoaded" Created="viewerCreated"></PdfViewerEvents>

                </SfPdfViewerServer>

            }

        </Content>

  private async Task viewerCreated()

    {

        await viewer!.LoadAsync(docfl, null);

    }

We have provided a sample of it below - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LOAD_S~1-176596097.zip

Kindly try this and let us know if you have any concerns.

[MrTayeb]

Thank you so much for your support.

that, solves the issue

[Visvesvar Venkatesan]

Thank you for your update.