How to Add button with parameter in Bold reports

[Nelson Tan]

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.

Thanks

Nelson

Attachment: Sample_Codes_c654518b.rar

[Manoranjan Rajendran]

Hi Nelson,

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

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/api-reference/properties/toolbarSettings/

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 }

        });

    }

}

[Nelson Tan]

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?

Thanks

Nelson

[Arumugasami Murugesan]

Nelson,

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

[Nelson Tan]

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

                         </button>

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.




Thanks




Nelson

Attachment: Sample_Codes_c654518b_b8407951.rar

[Arumugasami Murugesan]

Nelson,

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>

</select>

 

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

 

<p></p>

 

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

        parameter.Values.Add(param);

        viewerOptions.Parameters.Add(parameter);

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

    }

 

Attachment: ReportViewerServerApp_d682cf86.zip

[Nelson Tan]

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..

Thanks

Nelson

Attachment: Sample_Codes_c654518b_e2e8d41b.rar

[Arumugasami Murugesan]

Nelson,

If you want to change the value dynamically between razor page, you need to write the code to pass the value form one razor page to another. Please refer to the below documentation for your reference.

https://www.syncfusion.com/faq/blazor/webassembly/how-do-i-pass-values-from-one-page-to-another-in-blazor-webassembly#:~:text=By%20using%20Blazor%20route%20parameters,from%20one%20page%20to%20another.&text=Get%20the%20passed%20Page1%20parameter%20value%20in%20Page2.

https://stackoverflow.com/questions/60009559/how-i-can-load-another-razor-component-into-a-razor-component-by-a-button-click

https://www.syncfusion.com/faq/blazor/routing/how-do-you-navigate-from-one-component-to-another-component-in-asp-net-core-blazor

[Nelson Tan]

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.

Thanks

Nelson

[Mohamed Arsath Abdul Saleem]

Nelson,


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

Regards,
Mohamed Arsath A

[Nelson Tan]

Good Day Mohamed Arsath A ,

thanks for the reply.

How to solve SfComboBox second column is not vertically straight?

my codes is :

@bind-Value="DRheaderEdit.CustomerId"

DataSource="@Customers"

TItem="CustomerMaster"

TValue="int"

Placeholder="Select Customer"

CssClass="e-outline e-success e-multi-column"

AllowCustom="false"

Autofill="true"

AllowFiltering="true"

FloatLabelType="FloatLabelType.Auto"

PopupWidth="600px"

PopupHeight="300px"

Width="325px">

@*

*@

Name	Address	Area

@*

*@

@((ComboContext as CustomerMaster).CustomerName)

@((ComboContext as CustomerMaster).CustomerAddress)

@((ComboContext as CustomerMaster).Area.AreaCode)

the cause is this:

 <link rel='nofollow' href="https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.min.css" rel="stylesheet" />

thanks

Nelson

[Arumugasami Murugesan]

Nelson,

Please find the details in the below table,

Query	Response
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.   Thanks Nelson	We have prepared the sample blazor application to pass values from one page to another page. Please find the code snippet below. We have attached the blazor application for your reference. In Reporting.razor <select @bind="parameter">     <option value="SO50750">SO50750</option>     <option value="SO50751">SO50751</option>     <option value="SO50752">SO50752</option>     <option value="SO50753">SO50753</option> </select>   <button type="button" @onclick="OnClick">View Report</button>   @code {       private string parameter = "SO50750”.       private void OnClick()     {         UriHelper.NavigateTo($"reportviewer/{parameter}");     } }   In Reportviewer.razor <div id="report-viewer" style="width: 100%;height:800px" />   @code {       [Parameter]     public string Value { get; set; }       public BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();       private string reportPathInput = "sales-order-detail”.         // 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>();         parameter.Values.Add(Value);         viewerOptions.Parameters.Add(parameter);         JSRuntime.InvokeAsync<bool>("DisposeReportsObject").GetAwaiter();         await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);     } }
Good Day Mohamed Arsath A ,   thanks for the reply. How to solve SfComboBox second column is not vertically straight? my codes is : @bind-Value="DRheaderEdit.CustomerId" DataSource="@Customers" TItem="CustomerMaster" TValue="int" Placeholder="Select Customer" CssClass="e-outline e-success e-multi-column" AllowCustom="false" Autofill="true" AllowFiltering="true" FloatLabelType="FloatLabelType.Auto" PopupWidth="600px" PopupHeight="300px" Width="325px"> the cause is this:  <link rel='nofollow' href= https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.min.css rel="stylesheet" />   thanks   Nelson	The mentioned problem occurs when using the bold reports script along with the syncfusion control in your application. To resolve this issue, we need to use the EJ2 compatibility styles for our bold reports component. Please use the below Compatibility style: <link rel='nofollow' href=https://cdn.syncfusion.com/ej2/styles/compatibility/material.css rel="stylesheet" /> <link rel='nofollow' href=https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.compatibility.min.css rel="stylesheet" />                                                                                                                                                                     Instead of: <link rel='nofollow' href=https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.min.css rel="stylesheet" />

Attachment: Modified_sample_5f6c189e.zip

[Nelson Tan]

Good Day Arumugasami Murugesan ,

Thanks for the reply it works..

Nelson

[Arumugasami Murugesan]

Nelson,

We are glad to hear that the reported issue has been resolved on your end. If you face any other issues, we suggest you open a new ticket using your account. 

https://support.boldreports.com/create

[Nelson Tan]

Hello Arumugasami Murugesan ,

Noted Thanks..

Nelson

[Arumugasami Murugesan]

You’re welcome, Nelson

If you face any other issues, we suggest you open a new ticket using your account. 

https://support.boldreports.com/create