DxPdfViewer.CustomizeToolbar Event

Allows you to customize the PDF Viewer’s toolbar.

Namespace: DevExpress.Blazor.PdfViewer

Assembly: DevExpress.Blazor.PdfViewer.v24.1.dll

NuGet Package: DevExpress.Blazor.PdfViewer

Declaration

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

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

• AllItems
• VisibleGroupedItems
• VisibleItems

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

@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;
}