Customization - Report Viewer for Blazor (Native)
- 3 minutes to read
In This Article
#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.
#Custom Command Button in the Toolbar
The following code adds a custom command button to the toolbar:
@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:
@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.
@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.
@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:
@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();
}
}