Blazor - Report Viewer parameters

Question

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

Muthuramana Sankaranarayanan · Accepted Answer

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

Walter Martin · Answer

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.

Muthuramana Sankaranarayanan · Answer

Hi Walter,

Please find the details for your queries from below table,

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

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

Walter Martin · Answer

Hello Muthuregarding 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 thereI changed your last sample adding the components I need to usethey're two SfMaskedTextBox inside the report razor page modified to show a calendar with the javascript file maskedpicker.jsI 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 ?ThanksRegardsAttachment: reportviewerwithsyncfusionblazorcomponents_46055698.zip

Muthuramana Sankaranarayanan · Answer

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

Walter Martin · Answer

Hello MuthuI 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

Muthuramana Sankaranarayanan · Answer

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

Dave Vorgang · Answer

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

Arumugasami Murugesan · Answer

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, 
Arumugasami M