DxViewer.OnCustomizeToolbar Event

Allows you to customize the Viewer’s toolbar.

Namespace: DevExpress.Blazor

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

NuGet Package: DevExpress.Blazor.Viewer

Declaration

C#

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

VB.NET

<Parameter>
Public Property OnCustomizeToolbar As EventCallback(Of ToolbarModel)

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

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