Bold Reports for ASP.NET Core
Parameter Customization
Report Processing...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace ReportsCoreSamples.Controllers
{
[Route("report-viewer/parameter-customization")]
public class ParameterCustomizationController : PreviewController
{
[HttpGet("")]
public IActionResult Index()
{
this.updateMetaData();
return View();
}
}
}
@inject Globals globals;
@section control {
<bold-report-viewer id="reportviewer" report-service-url="@Globals.SERVICE_URL" report-path="product-line-sales.rdl"
toolbar-rendering="onToolbarRendering" tool-bar-item-click="onToolBarItemClick"
export-item-click="onExportItemClick" before-parameter-add="beforeParameterAdd" report-loaded="onReportLoaded">
</bold-report-viewer>
<script>
function beforeParameterAdd(args) {
args.parameterSettings.dateTimePickerType = "DateTime";
args.parameterSettings.dateTimeFormat = "MM/dd/yyyy hh:mm tt";
args.parameterSettings.timeDisplayFormat = "HH:mm";
args.parameterSettings.timeInterval = 60;
if (args.parameterModel.Name === "EndDate") {
var name = args.parameterModel.Name;
var $targetTag = $('#' + args.containerId);
var $dateTime = ej.buildTag("input", "", "", { 'id': args.parameterModel.ControlId, 'name': 'EndDate', 'type': 'text', 'style': 'width: 100%' });
$targetTag.append($dateTime);
var datetimepicker = new ejs.calendars.DateTimePicker({
value: args.parameterModel._dateValue,
open: function (args) {
var btn = ej.buildTag("div.e-dt-button e-btn e-dt-button e-btn e-select e-flate-flat mr-1", "NULL", "", { id: "null-btn-v2" });
if (args.popup.element.className.includes('null')) {
args.popup.element.firstChild.lastChild.prepend(btn[0]);
}
btn[0].addEventListener('click', function () {
datetimepicker.value = null;
datetimepicker.placeholder = 'Null';
});
},
change: function (args) {
var data = datetimepicker.value;
var updateParam = {
name: name,
labels: [data],
values: [data]
};
$('#reportviewer').data('boldReportViewer').updateParameter(updateParam);
}
});
datetimepicker.appendTo($dateTime[0])
var endDateInst = document.querySelector('[name="EndDate"]').ej2_instances[0];
var switchBaseTag = ej.buildTag("input", null, null, { 'id': endDateInst.element.id + '_parameter_disable_switch', 'type': 'checkbox', 'name': 'chkDateTime', 'value': this._id, 'style': 'margin-top:8px' });
if (document.querySelectorAll("#" + endDateInst.element.id + '_parameter_disable_switch').length == 0) {
$("#" + endDateInst.element.id + "_div").append(switchBaseTag);
var switchObj = new ejs.buttons.Switch({ checked: false, cssClass: "switchstyle" });
switchObj.appendTo($('#' + endDateInst.element.id + '_parameter_disable_switch')[0]);
switchObj.addEventListener('change', function (args) {
endDateInst.enabled = !switchObj.checked;
})
}
args.handled = true;
}
}
</script>
}
The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Chart report items.
- The sales details are organized by category and sub-category of products using the concept of cascading parameters. It allows users to filter Sub Category based on the selected Category.
- Non cascading parameters namely start date and end date also used in this report.
- End date non cascading parameter can be disabled using Switch button provided
- Null button in the end date parameter is used to set the parameter value as null. No data will be filtered since end date is null
More information about Cascading Parameters can be found in this documentation section.