ContextQMD
Back to Devexpress

Customize the Report Viewer Toolbar

xtrareports-404130-web-reporting-blazor-reporting-native-report-viewer-tasks-and-solutions-customize-toolbar.md

latest6.0 KB
Original Source

Customize the Report Viewer Toolbar

  • Feb 16, 2026
  • 3 minutes to read

Use the following Report Viewer’s API to customize toolbar appearance:

OnCustomizeToolbarHandle this event to add a new toolbar item or hide an existing item.ToolbarModelUse this property to obtain toolbar items.

View Example: Report Viewer for Blazor - Customization Scenarios

Add New Toolbar Item

Add a Full Screen Button

Handle the OnCustomizeToolbar event to add a custom command button to the toolbar. For example, this code adds a Full Screen 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);
            }
        });
    }

}

Add a Send Email Button

The following example handles the same CustomizeToolbar event to add a Send Email button. When a user clicks the button, a DxPopup window opens, and the user can specify export options:

View Example: Email a Report from the Native Blazor Report Viewer

Hide Existing Toolbar Item

The following code sample hides the Export To drop-down list in the toolbar:

razor
@using DevExpress.Blazor.Reporting.Models;
// ...
<DxReportViewer @ref="reportViewer"
                 OnCustomizeToolbar="OnCustomizeToolbar"/>

@code {
    DxReportViewer reportViewer;

    void OnCustomizeToolbar(ToolbarModel toolbarModel)
    {
        foreach (var item in toolbarModel.AllItems)
        {
            if (item.Id == "ExportTo")
            {
                item.GetEnabled = () => { return false; };
                item.Visible = false;
            }
        }
    }
}

Built-In Toolbar Customized Toolbar

For the list of toolbar item identifiers, refer to the ToolbarItemId class.

Hide Export Formats from ‘Export To’ Drop-Down List

Use the Report Viewer’s ExportModel property to access document export settings and modify the Export To drop-down list.

The following code sample hides all export formats except PDF and Image:

razor
@page "/hideexport/"

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

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

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

    var formats = new string[] { "Pdf", "Image" };

    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            reportViewer.ExportModel.AvailableFormats
            .RemoveAll(item => !formats.Contains(item.Name));
        }
    }    
}

The image below illustrates the customized toolbar.

Change Zoom Level

Use the Zoom property to set the zoom level of the document that the Report Viewer displays.

The following code sets the zoom level to 125%:

razor
<DxReportViewer @ref="reportViewer"
                Zoom="1.25"
                Report="Report" />

Use constants to set the zoom level to PageWidth and WholePage. The following snippet sets the zoom level to Page Width :

razor
@using DevExpress.Blazor.Reporting.Models
@*...*@

<DxReportViewer @ref="reportViewer" Report="Report" Zoom=ZoomConstants.PageWidth/>

You can also use the UpdateZoomAsync method to change the page zoom level in the Report Viewer.

Use the SinglePagePreview property to specify whether to display one or multiple pages in a preview.

See Also

Toolbar