Blazor - Report Viewer parameters

9 Replies
4 Participants
Marked answer

Created by
WM Walter Martin

Platform
Report Platform

Platform
Report Platform

Control
Report Viewer

Created On
Dec 10, 2020 10:19 PM UTC

Last Activity On
Nov 10, 2021 12:50 PM UTC

Want to subscribe?
SIGN IN

I don't find any sample or description on the right way to pass parameters to Bold-ReportViewer component from a Blazor server application (version 18.3.0.52)

I manged to create the RDLC file and to add inside a parameter with the designer tool but how can I fill it from the Blazor application ?

I'm using this piece of code to show successfully the RDLC file

@code {

// ReportViewer options

BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

// Used to render the Bold Report Viewer component in Blazor page.

public async void RenderReportViewer()

{

viewerOptions.ReportName = "Ore_lavorate_per_addetto";

viewerOptions.ServiceURL = "/api/BoldReportsAPI";

viewerOptions.

await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);

}

// Initial rendering of Bold Report Viewer

protected override void OnAfterRender(bool firstRender)

{

RenderReportViewer();

}

9 Replies 1 reply marked as answer

MS Muthuramana Sankaranarayanan Syncfusion Team December 11, 2020 04:44 AM UTC

Hi Walter,

Sorry for the inconvenience caused with your experience with our documentation.

We already have a plan to include the report parameter section for Blazor Report Viewer which will be in available in live in the upcoming days. As of now we suggest you to follow the below steps to pass parameter values in Blazor application

Please refer the below code in your application for passing parameter from client side.

1. Integrate Report parameters in BoldReportViewer class.

public class BoldReportViewerOptions

{

public string ReportName { get; set; }

public string ServiceURL { get; set; }

public List<JSReportParameter> Parameters { get; set; }

}

public class JSReportParameter

{

public string Name { get; set; }

public List<string> Values { get; set; }

}

2. Open boldreports-interop.js file and the parameter method.

RenderViewer: function (elementID, reportViewerOptions) {

$("#" + elementID).boldReportViewer({

reportPath: reportViewerOptions.reportName,

reportServiceUrl: reportViewerOptions.serviceURL,

parameters: reportViewerOptions.parameters

});

}

3. In Report viewer Razor page assign the parameter value.

public async void RenderReportViewer()

{

viewerOptions.ReportName = "sales-order-detail";

viewerOptions.ServiceURL = "/api/BoldReportsAPI";

viewerOptions.Parameters = new List<JSReportParameter>();

JSReportParameter parameter = new JSReportParameter();

parameter.Name = "SalesOrderNumber";

parameter.Values = new List<string>();

parameter.Values.Add("SO50756");

viewerOptions.Parameters.Add(parameter);

await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);

}

We have also prepared a sample for your reference which can be downloaded from below link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Client-side_parameter-641157395

Regards,

Muthu Ramana S

Marked as answer

WM Walter Martin December 12, 2020 09:04 PM UTC

many thanks,

your sample works and I managed to add parameters to my application but now I have a different problem

I added a line like this in one of the pages:

because I need a calendar where I can type the date in a mask like __/__/__ and I followed a suggestion received from Blazor forum

to accomplish this where your colleague wrote that it was necessary to add the line in bold below inside the head of _Host.cshtml file:

@*questo script serve solo per risolvere il problema che la riga delle griglie una volta espansa, non si espande più al secondo click*@

@*this script shows the calendar in the mask*@

The problem is that before using the boldreports everything worked but now, if I place the bold line there, the calendar is no more showed and the report works instead if I place that bold line at the end of all the js files, the calendar works again and the report generates an error.

I don't know what this script does "https://cdn.syncfusion.com/ej2/dist/ej2.min.js" but it's clear that the boldreports script are not well integrated with other script.

How can I solve this problem ?

Thanks

And there's also another most important problem... I'm using RDLC and not RDL so I need to set reportOption.ReportModel.DataSource.

If I use your project, my DataSourrce is a parametrized query to the dB.

How can I pass my parameters from Reporting.razor to the public void OnInitReportOptions(ReportViewerOptions reportOption) where I set the DataSource ?

Surprisingly inside reportOption the reportOption.ReportModel.Parameters property is null.

MS Muthuramana Sankaranarayanan Syncfusion Team December 14, 2020 01:02 PM UTC

Hi Walter,

Please find the details for your queries from below table,

I don't know what this script does "https://cdn.syncfusion.com/ej2/dist/ej2.min.js" but it's clear that the boldreports script are not well integrated with other script.

How can I solve this problem ?

Thanks

You need to use the compatibility styles and an order of scripts when using Bold Reports along with ej2 components. We suggest you to refer the below scripts in you application,

For Style, you need to refer the compatibility styles of EJ2 from Bold Reports and Bold Reports styles should be referred before EJ2 styles.

You should refer EJ2 scripts before Bold Reports scripts as follows.

<head>

<title>BoldReports ReportViewer and EJ2 controls</title>

@* Syncfusion Essential JS 2 Styles *@

@* BoldReports Styles *@

@*Default scripts*@

@* Syncfusion Essential JS 2 Scripts *@

@* BoldReports Scripts *@

</head>

If you have already referred the scripts as like in above then could you please share with us the snap of the issue as it will be helpful for us to check and provide the solution.

And there's also another most important problem... I'm using RDLC and not RDL so I need to set reportOption.ReportModel.DataSource.

If I use your project, my DataSourrce is a parametrized query to the dB.

How can I pass my parameters from Reporting.razor to the public void OnInitReportOptions(ReportViewerOptions reportOption) where I set the DataSource ?

Surprisingly inside reportOption the reportOption.ReportModel.Parameters property is null.

Please find the below code example for filtering the data for RDLC in server side using parameters.

private Dictionary<string, object> _jsonResult;

[HttpPost]

public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)

{

_jsonResult = jsonResult;

return ReportHelper.ProcessReport(jsonResult, this, this._cache);

}

public void OnReportLoaded(ReportViewerOptions reportOption)

{

var parameters = new List<ReportParameter>();

if (_jsonResult != null && _jsonResult.ContainsKey("parameters"))

{

var parameter1 = _jsonResult["parameters"].ToString();

parameters = JsonConvert.DeserializeObject<List<ReportParameter>>(parameter1);

}

List<BoldReports.Web.ReportParameter> setParameters = new List<BoldReports.Web.ReportParameter>();

string productCategory = "1";

if (parameters.Count > 0)

{

setParameters.Add(new BoldReports.Web.ReportParameter()

{

Name = "ProductSubcategory",

Labels = new List<string>() { "Road Bikes" },

Values = parameters[0].Values

});

}

else

{

setParameters.Add(new BoldReports.Web.ReportParameter()

{

Name = "ProductSubcategory",

Labels = new List<string>() { "Road Bikes" },

Values = new List<string>() { "1" },

});

}

setParameters.Add(new BoldReports.Web.ReportParameter()

{

Name = "StartDate",

Values = new List<string>() { "2003-1-1" }

});

setParameters.Add(new BoldReports.Web.ReportParameter()

{

Name = "EndDate",

Values = new List<string>() { "2003-12-31" }

});

reportOption.ReportModel.Parameters = setParameters;

reportOption.ReportModel.DataSources.Clear();

reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopEmployees", Value = ProductLineSales.Employee.GetTopEmployees(productCategory, setParameters[0].Values[0].ToString(), DateTime.Parse(setParameters[1].Values[0].ToString()), DateTime.Parse(setParameters[2].Values[0].ToString())) });

reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "ProductCategories", Value = ProductLineSales.ProductCategory.GetProductCategories() });

reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopCustomers", Value = ProductLineSales.Customer.GetTopCustomers(productCategory, setParameters[0].Values[0].ToString(), DateTime.Parse(setParameters[1].Values[0].ToString()), DateTime.Parse(setParameters[2].Values[0].ToString())) });

reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "ProductSubcategories", Value = ProductLineSales.SubCategory.GetProductSubCategories() });

}

Also we have prepared a sample as per your requirement which can be found from below download link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportViewerBlazor946760287.zip

Regards,

Muthu Ramana S

WM Walter Martin December 16, 2020 03:44 PM UTC

Hello Muthu

regarding the parameters with the RDLC file, everything is clear and solved thanks to your last suggestions and sample.

Regarding the CSS and JS with the right order and the compatibility mode, the problem is still there

I changed your last sample adding the components I need to use

they're two SfMaskedTextBox inside the report razor page modified to show a calendar with the javascript file maskedpicker.js

I don't know where to place these two lines in the _host.cshtml file because depending on where the are, the sidebar doesn't work anymore or the sfmaskedtextbox doesn't show the calendar or even the reportviewer generates an error

Have you a solution for this ?

Thanks

Regards

Attachment: reportviewerwithsyncfusionblazorcomponents_46055698.zip

MS Muthuramana Sankaranarayanan Syncfusion Team December 17, 2020 01:59 PM UTC

Hi Walter,

We checked the reported issue with the shared sample. We suggest you to follow the below steps to get the issue resolved at your end.

Refer the “ej2.min.js” file in the top as mentioned like in the documentation.

@*Syncfusion Essential JS 2 Scripts*@

@*BoldReports Scripts*@

@*Used to render the chart item. Add this script only if your report contains the chart report item.*@

Refer your “maskedpicker.js” file at the bottom as like in the below,

@* Syncfusion Essential JS 2 Styles *@

@* BoldReports Styles *@

@*Dependent scripts*@

@*Syncfusion Essential JS 2 Scripts*@

@*BoldReports Scripts*@

@*Used to render the chart item. Add this script only if your report contains the chart report item.*@

@*Report Viewer component script*@

@*Blazor interop file*@

@*questo script serve solo per poter mostrare il datepicker con la maschera*@

</head>

When you are using ej2 components along with Bold Reports you need to use “ejs” for initializing the ej2 components in the javascript, which we have already mentioned in the below documentation,

https://help.boldreports.com/embedded-reporting/faq/bold-reports-with-ej2-controls/#using-ej2-components-with-javascript

We suggest you to modify the calendar component initialization in the “maskedpicker.js” as like below,

window.onMaskInitialized = function (date, mask) {

var maskInstance = document.getElementById(mask).ej2_instances[0];

var datepicker = new ejs.calendars.DatePicker({

created: function () {

this.inputWrapper.container.style.display = "none";

change: function (args) {

var instance = document.getElementById("mask").ej2_instances[0]

if (args.isInteracted) {

instance.value = getMaskValue(this.value);

instance.focusIn();

}

showClearButton: false,

open: function (args) {

args.popup.relateTo = document.getElementById(mask).ej2_instances[0].inputObj.container;

}

});

…

var datepicker = new ejs.calendars.DatePicker({

created: function () {

this.inputWrapper.container.style.display = "none";

change: function (args) {

var instance = document.getElementById("mask1").ej2_instances[0]

if (args.isInteracted) {

instance.value = getMaskValue(this.value);

instance.focusIn();

}

showClearButton: false,

open: function (args) {

args.popup.relateTo = document.getElementById(mask).ej2_instances[0].inputObj.container;

}

});

We have also modified the sample which can be downloaded from the below link,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/reportviewerwithsyncfusionblazorcomponents_46055698-1996015762

Regards,

Muthu Ramana S

WM Walter Martin January 10, 2021 02:40 PM UTC

Hello Muthu

I add you in attachment your original sample where I'm facing a different problem now.

My question is: is it possible to use a RDLC file with Query parameter values ?

I see in your sample that your using a ProductSubcategory parameter with values from a query and in this way you can show a dropdownlist with three options: "Mountain bikes" "Road bikes" and "Touring bikes" but if I select one of them and then I clicked on "View report" button, the report data don't change. What is missing ?

Attachment: ReportViewerBlazor946760287_9162fbf2.zip

MS Muthuramana Sankaranarayanan Syncfusion Team January 11, 2021 10:25 AM UTC

Hi Walter,

We checked the reported issue and we were able to reproduce this. As of now we do not have option to filter the report data using the parameters while clicking the View report button for RDLC report. We have already logged the feature for this. The support for filtering the dataset while clicking the View Report button for RDLC will be available in any of our upcoming Bold Reports release. We suggest you to have follow up regarding this using the below feedback link,

https://www.boldreports.com/feedback/7822/option-for-getting-the-datasource-and-parameters-information-in-reportviewer

As of now could you please use external button for filtering the data for RDLC using setModel event. Please find the below steps to achieve this,

Create a external button to preview the report

<button type="button" @onclick="RenderReport">Open Report Viewer</button>

<button type="button" @onclick="ViewReport">View Report</button>

Now while clicking on this button pass the parameter value and set the parameters as like shown in below code snippet

Reporting.razor:

private string ParameterInput = "2";

….

public async void ViewReport()

{

JSRuntime.InvokeVoidAsync("viewReport", "reportViewerControl", ParameterInput);

}

_Host.cshtml:

function viewReport(elementID, ParamValue) {

var reportObject = $("#" + elementID).data("boldReportViewer");

reportObject.setModel({

parameters: [{

name: 'ProductSubcategory',

labels: [ParamValue],

values: [ParamValue],

nullable: false

}],

});

};

We have additionally hidden the parameter block to avoid confusion and prepared the sample as per your requirement. Please find the sample from below download link,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportViewerBlazor-918317074

Regards,

Muthu Ramana S

DV Dave Vorgang replied to Muthuramana Sankaranarayanan November 9, 2021 05:39 PM UTC

Hi, how would I pass parameters to rdlc report for the ReportWriter instead of the viewer?

Thanks

AM Arumugasami Murugesan Syncfusion Team November 10, 2021 12:50 PM UTC

Hi Dave,

Thanks for the update,

Please follow the below documentation to pass the parameter in report writer.

https://help.boldreports.com/embedded-reporting/aspnet-core-reporting/report-writer/export-parameter-report/

Regards,