Angular ReportViewer - set report object properties dynamically

[Vic Alfred Inting]

I'm trying to integrate reportviewer onto our reporting, which currently lists multiple reports and parameters (date, location, employee, etc.).

Is it possible to change the report objects on the fly and render the report again? This is specifically for the Angular ReportViewer.

Thanks!

[Soundara Rajan S]

Hi Vic,

Thanks for using Syncfusion products.

You can able to change the reportviewer angular scope values while changing the dropdown options as shown in below code snippet,

<script type=”text/javascript”>

angular.module('syncApp', ['ejangular']).controller('angularReportViewer', function ($scope) {

$scope.samplevalue = '/api/ReportApi';

$scope.path = '~/ReportTemplate/TestReport1.rdl';

$scope.mode = ej.ReportViewer.ProcessingMode.Remote;

});

$("#dd1").change(function (args) {

var _index = $("#dd1 option:selected").index() + 1;

var scope = angular.element(document.body).scope();

scope.$apply(function () {

scope.path = '~/ReportTemplate/TestReport' + _index + '.rdl';

});

});

</script>

For your reference, we have prepared sample based on this and it can be downloaded from below location,
http://www.syncfusion.com/downloads/support/forum/119633/AngularDemo-1508919695.zip

Please let us know, if you have any concerns.

Regards,
Soundara Rajan S.

[Toni Veintimilla]

Hello,

I'm trying to run the example attached above by Soundara, but I'm getting some errors:

First we have 3 broken references: Syncfusion.Core, Syncfusion.EJ.ReportViewer and Syncfusion.Linq.Base. 

I've read in the docs about the nugget package for Syncfusion.Web.ReportViewer but I don't know if this the good solution, not working for me at least.

After installing the package Syncfusion.WEB.ReportViewer (v.17.2.0.41) Syncfusion.EJ.ReportViewer reference is fixed but the other 2 are still broken but now VS let me launch the project.

I get another error related to package Microsoft.Web.Infrastructure... I install it using Nugget Package Manager... and now it seems to be working.

Then if I navigate to Angular.html or AngularRDLC.html report is not loading in both cases... I get the error below after clicking the "View Report" button in the top:

I get the same error when I try to follow the docs for reportViewer EJ1 for AngularJS and Javascript.

Can you please help me with some an up-to-date example for AngularJS implementation on these days? or at least a fixed example of this thread. I need to add this to an old project and I need to use AngularJS.

Thank you and best regards!

[Vinoth Srinivasan]

Hi Toni, 

 

We have validated the sample and this issue has been occurred since you are referring the old scripts in application. We have modified the sample by referring latest scripts from CDN and now the report has been rendering properly. Please find the below modified sample for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/119633/ze/AngularJSDemo1661964577.zip 

 

Regards, 

Vinoth S.