Customization - Report Viewer for Blazor (Native)

• Jun 17, 2024
• 3 minutes to read

Overview

The Report Viewer API entry point is the DxReportViewer class. You can specify its properties and handle its events to adjust the Report Viewer appearance and behavior.

View Example: Report Viewer for Blazor - Customization API

Custom Command Button in the Toolbar

The following code adds a custom command button to the toolbar:

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

}

Hide Export Formats

The following code hides all export formats except PDF:

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;

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

}

Hide Tabs in the Tab Panel

The following code hides tabs in the Tab Panel. If all tabs are hidden, the Report Viewer does not display the panel.

Razor

@page "/tabpanel/"

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

    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {
      reportViewer.TabPanelModel[TabContentKind.Parameters].Visible = false;
      reportViewer.TabPanelModel[TabContentKind.Search].Visible = false;
      reportViewer.TabPanelModel[TabContentKind.ExportOptions].Visible = false;
      reportViewer.TabPanelModel[TabContentKind.DocumentMap].Visible = false;    }
    base.OnAfterRender(firstRender);
}

}

Create the Stand-Alone Parameter Editor

The following code creates a custom component that is composed of a combo box and a button. The component allows the user to specify the report parameter value.

Razor

@page "/standalonepanel/"

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

<div class="cw-880">
    <EditForm Model="@OrdersModel"
              OnValidSubmit="@HandleValidSubmit"
              Context="EditFormContext">
        <DataAnnotationsValidator />
        <DxFormLayout CssClass="w-75 parameters-panel-custom">
            <DxFormLayoutItem Caption="Order Id:" ColSpanMd="4">
                <CustomCombobox Model=OrdersModel ParameterModel=ParameterModel />
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="1">
                <DxButton SubmitFormOnClick="true"
                          Text="Submit"
                          Title="Press the key to reload the report with the parameters."
                          RenderStyle="ButtonRenderStyle.Secondary" />
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="7">
                <ValidationSummary />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditForm>
</div>

<div style="width: 100%; height: calc(100% - 4rem);">
    <DxReportViewer @ref="reportViewer"
                    OnCustomizeParameters="OnCustomizeParameters"
                    Report="Report" />
</div>

@code {
    DxReportViewer reportViewer;
    XtraReport Report = new TableReport();
    OrdersModel OrdersModel = new OrdersModel();
    ParameterModel ParameterModel { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var parameterTab = reportViewer.TabPanelModel.Tabs
                .Where(Tab => Tab.ContentModel is ParametersModel)
                .FirstOrDefault();
            parameterTab.Visible = false;
            StateHasChanged();
        }
        base.OnAfterRender(firstRender);
    }

    void HandleValidSubmit()
    {
        if (!OrdersModel.OrdersData.Contains(OrdersModel.OrderId))
        {
            OrdersModel.OrdersData.Add(OrdersModel.OrderId);
            OrdersModel.OrdersData.Sort();
        }
        reportViewer.ParametersModel.OnSubmitParameters();
    }

    void OnCustomizeParameters(ParametersModel parameters)
    {
        ParameterModel = parameters.VisibleItems
            .Where(param => param.Name == "OrderIdParameter")
            .FirstOrDefault();
    }
}

Implement a Custom Parameter Editor

The following code specifies a custom template for the parameter editor in the Parameters panel:

Razor

@page "/customeditor/"

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

@implements IDisposable

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

@code {
    DxReportViewer reportViewer;
    XtraReport Report = new TableReport();
    private ElementReference viewerComponent;
    OrdersModel OrdersModel = new OrdersModel();
    ParameterModel ParameterModel { get; set; }

    void UnsubscribeParameters()
    {
        ParameterModel.ValueChanged -= OnParameterValueChanged;
    }

    void SubscribeParameters()
    {
        ParameterModel.ValueChanged += OnParameterValueChanged;
    }

    private void OnParameterValueChanged(object sender, EventArgs e)
    {
        var changedModel = sender as ParameterModel;
        OrdersModel.OrderId = (int)changedModel.Value;
    }

    void OnCustomizeParameters(ParametersModel parameters)
    {
        var parameter = parameters.VisibleItems
            .Where(param => param.Name == "OrderIdParameter").FirstOrDefault();
        parameter.ValueTemplate =@<CustomCombobox Model=OrdersModel ParameterModel=ParameterModel />;
        ParameterModel = parameter;
        SubscribeParameters();
    }

    public void Dispose()
    {
        if (ParameterModel != null)
        UnsubscribeParameters();
    }
}