Customize the Parameter Editor in the Report Viewer
- 5 minutes to read
Use the following Report Viewer API to customize report parameter behavior:
- DxReportViewer.ParametersModel
- Use this property to access report parameters. Use members of the ParametersModel class to access visible parameters, and reset or submit parameters in code.
- DxReportViewer.OnCustomizeParameters
- Handle this event to specify a custom editor for report parameters.
Customize Predefined Time Ranges
Important
The Native Report Viewer for Blazor does not support predefined date ranges.
To access predefined time ranges in Blazor Report Viewer, use the RangeParameterEditorOptions.PredefinedTimeRanges property. To add a new predefined time range to the collection, use RangeParameterEditorOptions.RegisterTimeRange methods.
The following code adds two new time ranges to the existing collection:
@page "/reportviewer/"
@using DevExpress.Blazor.Reporting
@using DevExpress.Blazor.Reporting.Models
@using DevExpress.Utils.Svg
@using DevExpress.XtraReports.Parameters
@using DevExpress.XtraReports.UI
@using BlazorServer.PredefinedReports
<DxReportViewer @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" OnCustomizeParameters="OnCustomizeParameters" />
@code {
DxReportViewer reportViewer;
XtraReport Report = new TestReport();
void OnCustomizeParameters(ParametersModel parametersModel) {
// Uncomment the following line to remove all predefined time ranges.
// RangeParameterEditorOptions.PredefinedTimeRanges.Clear();
var svgMoon = SvgImage.FromFile("moon.svg");
string timeRangeNightShift = "Night Shift";
if (!RangeParameterEditorOptions.PredefinedTimeRanges.ContainsKey(timeRangeNightShift)) {
RangeParameterEditorOptions.RegisterTimeRange(timeRangeNightShift, () => new TimeOnly(23, 0), () => new TimeOnly(5, 0), svgMoon);
}
var svgBack = SvgImage.FromFile("back.svg");
string timeRangeLastTwoHours = "Last 2 Hours";
if (!RangeParameterEditorOptions.PredefinedTimeRanges.ContainsKey(timeRangeLastTwoHours)) {
TimeOnly previousHour = TimeOnly.FromDateTime(DateTime.Now.AddHours(-2));
TimeOnly currentHour = TimeOnly.FromDateTime(DateTime.Now.AddHours(0));
RangeParameterEditorOptions.RegisterTimeRange(timeRangeLastTwoHours, () => previousHour, () => currentHour, svgBack);
}
}
}
Create a Standalone Parameter Editor
Important
Customization options described in this example are available to owners of DevExpress ASP.NET & Blazor Subscription, DXperience, or Universal subscription (subscriptions that include DevExpress ASP.NET & Blazor UI Controls). The DevExpress Reporting Subscription does not support UI customization in Report Viewer or End-User Report Designer.
Refer to the following help topic for information on subscription options: Installation - Subscriptions that Include Reporting Components.
You can hide the Parameter Panel and define a custom editor to specify parameter values:
The code below does the following:
- Hides the Parameter Panel through the Viewer’s TabPanelModel property.
- Creates a custom component based on DxComboBox to allow users to specify the report parameter value. The OnCustomizeParameters is handled to specify the created editor as the editor for the OrderIdParameter parameter.
- Creates a DxButton that handles user clicks and passes the specified parameter value to the Report Viewer. The OnSubmitParameters() method is triggered to build the report document with a new parameter value.
@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>
<DxReportViewer @ref="reportViewer"
OnCustomizeParameters="OnCustomizeParameters"
Report="Report" />
@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
Important
Customization options described in this example are available to owners of DevExpress ASP.NET & Blazor Subscription, DXperience, or Universal subscription (subscriptions that include DevExpress ASP.NET & Blazor UI Controls). The DevExpress Reporting Subscription does not support UI customization in Report Viewer or End-User Report Designer.
Refer to the following help topic for information on subscription options: Installation - Subscriptions that Include Reporting Components.
Handle the OnCustomizeParameters event to specify a custom editor for a report parameter:
The following code sample handles the OnCustomizeParameters event and assigns a custom template to the parameter editor in the Parameters panel (to the ValueTemplate property):
@page "/customeditor/"
@using DevExpress.Blazor.Reporting
@using DevExpress.XtraReports.UI
@using BlazorCustomization.PredefinedReports
@using DevExpress.Blazor.Reporting.Models
@using Models
<DxReportViewer @ref="reportViewer"
OnCustomizeParameters="OnCustomizeParameters"
Report="Report" />
@code {
DxReportViewer reportViewer;
XtraReport Report = new TableReport();
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();
}
}