Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxViewer.OnCustomizeToolbar Event

Allows you to customize the Report Viewer toolbar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.Viewer.dll

NuGet Package: DevExpress.Blazor.Viewer

#Declaration

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

#Parameters

Type Description
ToolbarModel

An object that contains a collection of toolbar items.

#Remarks

Handle the OnCustomizeToolbar event to add a new toolbar item or hide the existing item.

#Example: Customize the Toolbar

The following code adds a new toolbar button:

razor
@page "/toolbar/"

@using DevExpress.Blazor.Reporting
@using DevExpress.XtraReports.UI
@using BlazorCustomization.PredefinedReports
@using DevExpress.Blazor.Reporting.Models

@inject IJSRuntime JsRuntime

<div @ref="viewerComponent" style="width: 100%; height: 1000px;">
    <DxReportViewer @ref="reportViewer"
                    OnCustomizeToolbar="OnCustomizeToolbar"
                    Report="Report" />
</div>

@code {
    DxReportViewer reportViewer;
    XtraReport Report = new TableReport();
    private ElementReference viewerComponent;

    void OnCustomizeToolbar(ToolbarModel toolbarModel)
    {
        toolbarModel.AllItems.Add(new ToolbarItem()
        {
            // Use Open Iconic's icon.
            IconCssClass = "oi oi-command",
            Text = "Full Screen",
            AdaptiveText = "Full Screen",
            AdaptivePriority = 1,
            Click = async (args) =>
            {
                await JsRuntime.InvokeVoidAsync("customApi.requestFullscreen", viewerComponent);
            }
        });
    }

}

The customized toolbar is shown in the image below.

DxReportViewer Custom Toolbar

Tip

For information on how to hide selected export formats, review the following help topic: Hide Export Formats.

For more code samples review the following example:

View Example: Report Viewer for Blazor - Customization API

See Also