DxPdfViewer.CustomizeToolbar Event

Allows you to customize the PDF Viewer’s toolbar.

Namespace : DevExpress.Blazor.PdfViewer

Assembly : DevExpress.Blazor.PdfViewer.v25.2.dll

NuGet Package : DevExpress.Blazor.PdfViewer

Declaration

csharp

[Parameter]
public EventCallback<ToolbarModel> CustomizeToolbar { get; set; }

Parameters

Type	Description
ToolbarModel

The toolbar model.

Remarks

The PDF Viewer displays a built-in toolbar. Handle the CustomizeToolbar event to access and modify the toolbar before the component is initialized.

Note

To access and modify toolbar settings, register the DevExpress.Blazor.Reporting.Models namespace:

razor

@using DevExpress.Blazor.Reporting.Models

The CustomizeToolbar event’s parameter allows you to access the built-in toolbar. Use one of the following toolbar’s properties to access item collections:

Example

The following code snippet customizes the PDF Viewer’s toolbar:

Changes the icon of the predefined Print toolbar item.
Removes all predefined items from the toolbar item collection.
Creates a custom Download item and configures its settings.
Adds Download and Print items to the toolbar item collection.

Razor
CSS

razor

@using System.Reflection
@using DevExpress.Blazor.Reporting.Models

<DxPdfViewer @ref="pdfViewer"
             DocumentContent="@DocumentContent"
             CustomizeToolbar="OnCustomizeToolbar" />

@code {
    DxPdfViewer pdfViewer { get; set; }
    byte[] DocumentContent { get; set; }

    protected override async Task OnInitializedAsync() {
        Assembly assembly = Assembly.GetExecutingAssembly();
        Stream stream = assembly.GetManifestResourceStream("Pdf.DataSources.Document.pdf");

        using (var binaryReader = new BinaryReader(stream)) {
            DocumentContent = binaryReader.ReadBytes((int)stream.Length);
        }
    }
    protected void OnCustomizeToolbar(ToolbarModel toolbarModel) {
        var printToolbarItem = toolbarModel.AllItems.Where(i => i.Id == ToolbarItemId.Print).FirstOrDefault();
        if (printToolbarItem != null) {
            printToolbarItem.IconCssClass = "print-btn";
        }
        toolbarModel.AllItems.Clear();

        var downloadToolbarItem = new ToolbarItem {
            Text = "Download",
            AdaptiveText = "Download",
            BeginGroup = true,
            Id = "Download",
            IconCssClass = "download-btn",
            Click = async (args) => {
                await pdfViewer.DownloadAsync();
            }
        };
        toolbarModel.AllItems.Add(printToolbarItem);
        toolbarModel.AllItems.Add(downloadToolbarItem);
    }
}

css

.print-btn {
    mask-image: url(/images/printer.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: currentColor;
    --toolbar-icon-size: 25px;
}

.download-btn {
    mask-image: url(/images/download.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: currentColor;
    --toolbar-icon-size: 25px;
}