Error when combining Report Viewer with Syncfusion Blazor Component Library

[Bill Lemonis]

I've extended the sample from "https://help.boldreports.com/blazor/report-viewer/add-report-viewer-to-a-blazor-application/" by adding the Syncfusion.Blazor components library (I've placed the DatePicker Component), but when I run the application I get the following error:

Cannot read property 'enableBlazorMode' of undefined

The workaround was to manually include the JS file (<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>) and set the AddSyncfusionBlazor to true (services.AddSyncfusionBlazor(true);)

Is any other way to avoid the above steps?

Regards,

Bill

[Mahendran Shanmugam]

Hi Bill, 

We have checked the mentioned issue with Blazor Report Viewer along with Blazor Syncfusion component and we suspect this issue is due to the script referred for bold reports in the Host.cshtml file overrides the component’s scripts. So could you please refer the Blazor script manually to avoiding the mentioned problem at your end. We have prepared the simple sample for your reference and it can be downloaded from below location. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorReportingTools-346134839 

Regards, 

Mahendran S. 

[Frangoudes Panikos]

Good morning,

I too have the same problem.

when when combining Bold reports  Report Viewer with Syncfusion Blazor Component Library.

Report viewer works fine but many othe companents e.x. Grid -paging dont.

I tried your sample https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorReportingTools-346134839 which seems ok as is. But adding other Syncfusion Blazor components then problems are shown as varius settings are overwritten-changed .

Is there any way to combine Bold reports  Report Viewer with Syncfusion Blazor Component Library without problems ?

If yes can you please provide an extended sample.

Thank in advance.

Panikos Frangoudes

[Bill Lemonis]

Hello,

In order to have both libraries working together, just follow the steps bellow:

1. in Startup.cs change:

 public void ConfigureServices(IServiceCollection services)

{

services.AddSyncfusionBlazor(true); /// <= Add the value true

}

2. _Host.cshtml OR index.html

<!--  SCRIPTS  -->

    <script src="_framework/blazor.server.js"></script>

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>  <!--  ADD Manually the blazor library  -->

<!-- NOW ADD Bold Reports.  Just replace "~js/Scripts" with your own path!!! -->

    <script src="~/js/Scripts/bold-reports/common/bold.reports.common.min.js"></script>

    <script src="~/js/Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>

    <script src="~/js/Scripts/bold-reports/common/bold.report-designer-widgets.min.js"></script>

    <!-- Report Viewer component script -->

    <script src="~/js/Scripts/bold-reports/bold.report-viewer.min.js"></script>

    <script src="~/js/Scripts/bold-reports/bold.report-designer.min.js"></script>

Regards,

Bill

[Manoranjan Rajendran]

Hi Frangoudes, 

 

We have checked the mentioned issue with Blazor Report Viewer along with Blazor Syncfusion component and we were unable to reproduce the reported issue. Could you please share the Syncfusion.Blazor version used in the application and If possible could you please share our sample to the issue reproduceable case. It will be helpful to sort out the issue and our further validation. 

 

Regards, 

Manoranjan R 

[Frangoudes Panikos]

Hello Manoranjan,

I enclosed for your testing  an application  sample that shows some of the issues.

I am using two MainLayouts.You can set them in App.razor

With MainLayout everything seems to be working in order.

With MainLayout2 the report viewer works fine but the Treeview in the sidebar is not.

     This is the best of all situations I came up with  after a lot of tries. 

     I used services.AddSyncfusionBlazor(true); 

Can you please advice how to fix this ?

Best regards

Panikos Frangoudes 

Attachment: AppWorkBlazorApp17_cc618c1b.zip

[Mahendran Shanmugam]

Hi  Frangoudes, 

The mentioned problem occurs our Bold Reports styles overriding the Blazor controls styles and we need to use the compatibility styles for our Bold Reports component. So could you please use below .css files to avoiding the mentioned problem at your end. 

<link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" /> 

    <link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.theme.compatibility.min.css" rel="stylesheet" /> 

    <link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.reportdesigner.compatibility.min.css" rel="stylesheet" /> 

    <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" /> 

    <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" /> 

 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/ej2-base.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/ej2-data.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/ej2-pdf-export.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/ej2-svg-base.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/data-visualization/ej2-lineargauge.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/data-visualization/ej2-circulargauge.min.js"></script> 

 

    <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script> 

 

 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/bold.reports.common.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/bold.reports.widgets.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/common/bold.report-designer-widgets.min.js"></script> 

 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/data-visualization/ej.chart.min.js"></script> 

 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/data-visualization/ej.map.min.js"></script> 

 

    <!-- Reports component script--> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/bold.report-viewer.min.js"></script> 

    <script src="https://cdn.boldreports.com/2.2.32/scripts/bold.report-designer.min.js"></script> 

 

    <!--Blazor interop file--> 

    <script src="~/scripts/boldreports-interop.js"></script> 

 

We have modified your sample and it can be downloaded from below location. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AppWorkBlazorApp17-863878007.zip 

Regards, 

Mahendran S. 

[Frangoudes Panikos]

Good morning  Manoranjan,

THANK YOU you very much for your prompt reply.

Now it works OK.

Best Regards

Panikos Framgoudes

[Mahendran Shanmugam]

Hi  Frangoudes, 

Thanks for your update. 

Please let us know if you need any clarification. 

Regards, 

Mahendran S. 

[Gerald Maale]

Hi  Frangoudes, 

Thanks for your update. 

Please let us know if you need any clarification. 

Regards, 

Mahendran S. 

Hello,

Following the sample app provided works perfectly.  Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AppWorkBlazorApp17-863878007.zip 

However, if you create a parameter for the report with a date filter, the datepicker icon does not appear. It looks weird when displaying the datepicker control. The report ".rdl" preview shows the datepicker icon though.

I have attached screenshots of the report view. Hope there can be a workaround. 

Thanks.

Gerald.

Attachment: boldreportblazor_99ec1890.zip

[Manoranjan Rajendran]

Hi Gerald, 

 

We have validated the reported issue with provided sample. For using Ej2 component with Bold reports we have to refer the compatibility styles for application. Please refer the below code snippet in your application to avoid the styles issue.

 

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/bootstrap4.css" /> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156793/ze/AppWorkBlazorApp17-1082399363  

 

Regards, 

Manoranjan R 

[Gerald Maale]

Hello Manoranjan R,

Thank you for the quick update. I happy to report that the solutions works fine.

Best regards.

Gerald

[Mahendran Shanmugam]

Hi Gerald,  

Thanks for your update. 

Regards,  

Mahendran S.  

[Frangoudes Panikos]

Hi Gerald, 

 

We have validated the reported issue with provided sample. For using Ej2 component with Bold reports we have to refer the compatibility styles for application. Please refer the below code snippet in your application to avoid the styles issue.

 

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/bootstrap4.css" /> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156793/ze/AppWorkBlazorApp17-1082399363  

 

Regards, 

Manoranjan R 

Hello Manoranjan,

This  sample seems to work ok. with <TargetFramework>netcoreapp3.1</TargetFramework>

Sample: https://www.syncfusion.com/downloads/support/forum/156793/ze/AppWorkBlazorApp17-1082399363  

I upgraded to 

<TargetFramework>net5.0</TargetFramework> 

and does not work any more.

I also tried with upgrading bold reports to 

<PackageReference Include="BoldReports.Net.Core" Version="2.4.10" />

but still the same problem.

Can you please advice how to use Bold Reports with .NET 5.0 and if possible by upgrading the same sample .

Thank you in advance

Best Regards

Pabikos Frangoudes

[Mahendran Shanmugam]

Hi Panikos, 

We have checked the mentioned issue with upgrading to Framework 5.0 but it is working properly at our end. Please find the below modified sample for your reference. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/AppWorkBlazorApp-870307542.zip 

Regards, 

Mahendran S. 

[Frangoudes Panikos]

Hi Panikos, 

We have checked the mentioned issue with upgrading to Framework 5.0 but it is working properly at our end. Please find the below modified sample for your reference. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/AppWorkBlazorApp-870307542.zip 

Regards, 

Mahendran S. 

Hello Manoranjan,

thank you for your prompt reply.

In my previous message I didn't mentioned upgrading <PackageReference Include="Syncfusion.Blazor" Version="18.2.0.59" />    

to the latest version <PackageReference Include="Syncfusion.Blazor" Version="18.3.0.42" /> 

 or to any one of  Syncfusion Blasor  Version="8.3.0.......

It seems that Bold Reports styles overriding the Blazor controls styles again.

Can you please advice how to correctly use  Bold Reports with latest versions .Syncfusion Blasor  Version="8.3.0.... 

and if possible by upgrading the same sample .

Thank you in advance

Best Regards

Panikos Frangoudes

[Mahendran Shanmugam]

Hi Panikos,   

Sorry for the delay. 

We are having the issue with using the updated blazor component version. We have logged the bug task for this. We will fix this issue and include this fix changes in our upcoming Vol3 2020 SP1 release and it is estimated to release on 3rd November 2020. 

After upgrading the version to our Volume 3 SP1 release the could you please change the below steps in our previously provided application. 

1. Remove the below line from _Host.cshtml file

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script> 

 

2. Remove true from AddSyncfusionBlazor service in Startup.cs file.

services.AddSyncfusionBlazor(); 

Regards,  

Mahendran S.  

[Mahendran Shanmugam]

Hi Panikos, 

Essential studio Volume 3 SP1 release has been held, so could you please upgrade the Blazor version to updated version and do the previously shared steps in your application to avoiding the mentioned problem at your end. 

Regards,  

Mahendran S. 

[Frangoudes Panikos]

Hi Panikos, 

Essential studio Volume 3 SP1 release has been held, so could you please upgrade the Blazor version to updated version and do the previously shared steps in your application to avoiding the mentioned problem at your end. 

Regards,  

Mahendran S. 

Good evening Mahendran,

thank you for the update.

I am sorry for the long time to respond.

I used you guidance and everything seems to work Ok.

Best Regards

Panikos Frangoudes

[Mahendran Shanmugam]

Hi Panikos,  

Thanks for your update. 

We are happy that issue was resolved at your end. 

Regards,   

Mahendran S.  

[Frangoudes Panikos]

Hello Manoranjan,

following the example In your answer I noticed that the report viewer does not show the image from the example report or any other report with an image

Though I tried a lot diffferent  versions etc. It seems that the problem lies with the report viewer.

I enclosed a newer version of the example for your reference.

I do not know if I am doing anything wrong but it seems that the following method is never called on the api controller. I presume that when there is an image the method should be called

 //Get action for getting resources from the report

        [ActionName("GetResource")]

        [AcceptVerbs("GET")]

        // Method will be called from Report Viewer client to get the image src for Image report item.

        public object GetResource(ReportResource resource)

        {

            return ReportHelper.GetResource(resource, this, _cache);

        }

Please advice on this issue and also if I can upgrade everything to 

<TargetFramework>net6.0</TargetFramework>

or not .

 I tried upgrating all libraries but i have issues with Bold reports

<!--<PackageReference Include="BoldReports.Net.Core" Version="3.1.45" />-->

Thank you in advance

Panikos Frangoudes

Attachment: AppWorkBlazorApp870307542new_3b755720.zip

[Frangoudes Panikos]

Hello Manoranjan,

following the example In your answer I noticed that the report viewer does not show the image from the example report or any other report with an image

Though I tried a lot diffferent  versions etc. It seems that the problem lies with the report viewer.

I enclosed a newer version of the example for your reference.

I do not know if I am doing anything wrong but it seems that the following method is never called on the api controller. I presume that when there is an image the method should be called

 //Get action for getting resources from the report

        [ActionName("GetResource")]

        [AcceptVerbs("GET")]

        // Method will be called from Report Viewer client to get the image src for Image report item.

        public object GetResource(ReportResource resource)

        {

            return ReportHelper.GetResource(resource, this, _cache);

        }

Please advice on this issue and also if I can upgrade everything to 

<TargetFramework>net6.0</TargetFramework>

or not .

 I tried upgrating all libraries but i have issues with Bold reports

<!--<PackageReference Include="BoldReports.Net.Core" Version="3.1.45" />-->

Thank you in advance

Panikos Frangoudes

Attachment: AppWorkBlazorApp870307542new_3b755720.zip

Edit  Reply  Delete

[Lingaraj S]

Hi Frangoudes Panikos,

Please use the below help documentations to resolve the image rendering issue with .NET Core Blazor.

https://help.boldreports.com/report-viewer-sdk/how-to/resolve-unsupported-media-type-error-on-loading-image-in-asp.net-core/

https://help.boldreports.com/report-viewer-sdk/how-to/resolve-the-image-render-and-export-issue-with-asp.net-core-authentication/

Regards,

Lingaraj S.