We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to Add button with parameter in Bold reports

Good Day Syncfusion,

How to Add button with parameter in Bold reports?  my sample transaction is in image, the parameter or DRHeaderID is 4:

I click Report button(Fig.1) to preview the Bold Report but the parameter appear is 1(Fig 2):

Fig. 1.

Fig 2.

What is the solution? i upload my sample codes for my transaction and bold report razor.



Attachment: Sample_Codes_c654518b.rar

15 Replies

MR Manoranjan Rajendran Syncfusion Team March 15, 2023 04:30 AM UTC

Hi Nelson,

Using the toolbar property setting, you can hide the parameter panel. Please refer to the below documentation for this.


Code snippet:

window.BoldReports = {

    RenderViewer: function (elementID, reportViewerOptions) {

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

            reportPath: reportViewerOptions.reportName,

            reportServiceUrl: reportViewerOptions.serviceURL,

            parameters: reportViewerOptions.parameters,

         toolbarSettings: { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters }




NT Nelson Tan March 15, 2023 09:35 AM UTC

Good Day Manoranjan Rajendran,

I mean how can i preview report with the same ID like in transaction i saved? Like in the image where my transaction ID is 4(see Fig. 1) but when i click button preview for bold report the ID is 1(see Fig. 2)? what is the solution?, What is the code for adding parameter in Bold reports based from codes i uploaded?



AM Arumugasami Murugesan Syncfusion Team March 15, 2023 12:20 PM UTC


Thanks for the update.

In the ReportViewer.razor, you have hardcoded the parameter values as 1, so when you preview the report, it is showing the transaction ID as 1. Could you please change the parameter values to 4 as shown in the below snap to resolve the reported issue? We have attached the modified file for your reference.

Attachment: Modified_File_48b0efc.zip

NT Nelson Tan March 15, 2023 02:00 PM UTC

Good Day Arumugasami Murugesan

thanks for the quick reply..

        1. How can i add Parameter DrheaderId  for bold report in my Report button?

            a. My button codes from DREdit.Razor file is this:

     <button type="submit" class="button button2" @onclick="GenerateReport">

                             <span class="oi oi-print"></span>Report


    b. My Button codes from DREditBase.cs file is this:

    public void GenerateReport()


                string url = "/reportviewer/";          

                JSRuntime.InvokeVoidAsync("window.open", url, "_blank");


    2. My Transaction ID is based from DrheaderId, please check  DREditBase.cs file row 561:

               ID = result.DrheaderId.ToString();

    3. How can i add parameter in RenderReportViewer to automatically add values based in selected DrheaderId  from DREditBase .cs and  not manually in parameter.Values.Add("1"); ? So when i open my created transaction from DREdit.Razor and i select DrheaderId for example is 2 then i click Report Button it will automatically preview bold report based in DrheaderId i selected.

    Please check the sample codes i uploaded.



Attachment: Sample_Codes_c654518b_b8407951.rar

AM Arumugasami Murugesan Syncfusion Team March 16, 2023 12:24 PM UTC


Thanks for the update.

If you want to preview the report automatically based on selecting the parameter values, you need to add the below code snippet in the Reporting.razor file. Please refer to the below output snap for your reference. We have prepared and attached the sample application file for your reference.

In Reporting.razor


<select @bind="param">

    <option value="SO50750">SO50750</option>

    <option value="SO50751">SO50751</option>

    <option value="SO50752">SO50752</option>

    <option value="SO50753">SO50753</option>



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




<div id="report-viewer" style="width: 100%;height:800px" />


@code {


    public BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();


    private string reportPathInput = "sales-order-detail";


    private string param = "SO50750";


    // You have to call this method based on your need. It can called while loading the page or after selection the report.

        public async void RenderReport()


        viewerOptions.ReportName = reportPathInput;

        viewerOptions.ServiceURL = "/api/ReportApi";


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

        BoldReportParameter parameter = new BoldReportParameter();

        parameter.Name = "SalesOrderNumber";

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



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



Attachment: ReportViewerServerApp_d682cf86.zip

NT Nelson Tan March 17, 2023 01:53 AM UTC

Good Day Arumugasami Murugesan ,

Thanks for the reply..

How can I add Button for preview the Bold Reports in DREdit.razor and it will go to ReportViewer.razor to preview report from selected transaction in DREdit.razor?

I uploded my sample codes please check..



Attachment: Sample_Codes_c654518b_e2e8d41b.rar

NT Nelson Tan March 17, 2023 09:25 AM UTC

Good Day Arumugasami Murugesan ,

thanks for the reply..

Can you give me an example of this? the first page is have button with parameter and the 2nd page is for ReportViewer.razor or Bold Report page.



MA Mohamed Arsath Abdul Saleem Syncfusion Team March 20, 2023 02:19 PM UTC


We are currently working on this sample and we will share the sample for this on or before 23rd March 2023.

Mohamed Arsath A

NT Nelson Tan March 21, 2023 02:46 AM UTC

Good Day Mohamed Arsath A ,

thanks for the reply.

How to solve SfComboBox second column is not vertically straight?