Angular Report Viewer in app housed in .NET MVC

[Justin]

I am currently developing a reporting app with Angular. This app is housed in .NET MVC architecture due to the constraints I must work within. In order to keep my data access tier from knowing anything about the reports themselves, I have a separate DatabaseManager that makes my queries and returns the results in a business object. My angular front-end gets the query parameters from the user, makes the rest call to an MVC ApiController. 

My question is this: how do I take the business object and display the data in the report within the angular app? I have the angular report viewer in my component html. On the back-end, I can create an instance of the report I made in the designer, set it's DataSource to the business object, and make that the ReportDocument property of an InstanceReportSource. After returning that to the front-end, I am stuck.

How can I get that InstanceReportSource in the report viewer? Am I going about this in the wrong way to begin with?

[Milko]

Hello, Justin,

Thank you for questions, but I am not quite sure I understood your scenario completely. If you are trying to run an MVC application I would suggest taking a look at the examples we provide within the installation (folder  <installation folder>\Telerik\Reporting R2 2017\Examples\CSharp - project CSharp.MvcDemo).
Also, you could take a look at ObjectDataSource which could help you integrate your custom business object into Telerik Reporting and if I understood correctly you would like to have some Custome Report Resolver.

For the Angular part of your application, I would suggest taking a look at Example (<installation folder>\Telerik\Reporting R2 2017\Examples\Angular) once again and try to connect with the MVC project from the Examples. One common issue that is a stopper for integration Angular application with Telerik Reporting Rest service is CORS. You need to enable CORS for the Reporting REST service - How to Enable CORS for the Reporting REST service (in the service's project).

I hope some of the guidance and links will help you, if not I would really appreciate more details about your custom scenario. Please take your time to examine the examples from the installation folder. I am waiting for your feedback.

Regards,
Milko
Progress Telerik

[Justin]

Hi Milko,

Thanks for the response. I was looking in to enabling CORS like you suggested. If I am able to test the REST service by appending  "api/reports/formats" to my url like in the Reporting REST Service documentation, and get back the JSON with the reporting formats, would enabling CORS be the problem?

Also, regarding the Custom Report Resolver, is there an example available of using a custom resolver with an InstanceReportSource? Right now, my ReportingService class looks something like this: 

namespace SampleReportApp.Services.ReportServices
{
    public class ReportingService
    {
        public static InstanceReportSource GetPeakUsage()
        {
            //Query Database
            ProcessedPeaksList searchResults = new ProcessedPeaksList(); //In actual project, this line returns a ProcesedPeaksList (my business object containing the query results)
            PeakUsageReport peakUsageReport = new PeakUsageReport();
            peakUsageReport.DataSource = searchResults.processedPeaks;

            InstanceReportSource IRS = new InstanceReportSource();
            IRS.ReportDocument = peakUsageReport;

            return IRS;
        }
    }
}

 

I am unclear on how to display the report in the ReportViewer. Do I have to have the Custom Resolver create an XML definition in my database beforehand, or is there another way to resolve the reports?

[Nasko]

Hello Justin,

We replied to your question in your support ticket. Let us continue the discussion there to keep all the information in a single thread, so it is easier for us to investigate.

Regards,
Nasko
Progress Telerik