| title | Getting Started in AngularJS ReportViewer Control | Syncfusion |
|---|---|
| description | Learn here about getting started with Syncfusion Essential AngularJS ReportViewer Control, its elements, and more. |
| platform | AngularJS |
| control | ReportViewer |
| documentation | ug |
| keywords | ejReportViewer, ReportViewer, js ReportViewer |
This section explains briefly about how to create a ReportViewer in your web application with AngularJS.
In this tutorial, you can learn how to create a simple ReportViewer control, Load RDLC Report and Load SSRS Report in your web application with AngularJS.
Create a new HTML file and include the below initial code.
{% highlight html %}
<title> </title>{% endhighlight %}
Refer the CSS file from the specific theme folder to your HTML file within the head section as shown below. Please refer to our built-in theme here.
{% highlight html %}
<title>Getting Started - ReportViewer</title>{% endhighlight %}
Refer the CDN script files with other required external dependencies.
{% highlight html %}
<title>Getting Started - ReportViewer</title> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/common/ej.widget.angular.min.js"></script>{% endhighlight %}
In the above code, ej.web.all.min.jsscript reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can useCSG utility to generate a custom script file with the required widgets for deployment purpose.
The ng-app directive explains the root element ( or tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services and configurations.
Add the following code example in the <body> tag in the HTML page. Set the desired processingmode, reportPath and reportServiceUrl to ReportViewer.
{% highlight html %}
{% endhighlight %}
N> Default RDL Report will be rendered, which is used in the online service. You can obtain sample rdl/rdlc files from Syncfusion installed location (%userprofile%\AppData\Local\Syncfusion\EssentialStudio{{ site.releaseversion }}\Common\Data\ejReportTemplate).
Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot.
ReportViewer with Grouping Aggregate Report {:.caption}
ReportViewer supports to load RDL/RDLC files from SSRS Server. The following steps help you to load reports from SSRS Server.
1.Set the reportPath from SSRS and SSRS reportServerUrl in the ReportViewer properties.
{% highlight html %}
{% endhighlight %}
N> The credential information for Report Server is provided in online service.
2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot.
Report from SSRS {:.caption}
The ReportViewer has data binding support to visualize the RDLC reports. The following code example helps you to bind data to ReportViewer.
1.Assign the RDLC report path to ReportViewer’s reportPath property and set the data sources to the ReportViewer’s dataSources property and specify the processingMode as local.
{% highlight html %}
{% endhighlight %}
N> Default RDLC Report will be rendered, which is used in the online service. You can obtain sample rdl/rdlc files from Syncfusion installed location (%userprofile%\AppData\Local\Syncfusion\EssentialStudio{{ site.releaseversion }}\Common\Data\ejReportTemplate).
2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot.
Area Chart RDLC Report {:.caption}