Web Report Designer

[Ray]

Hello,

We have a web application (front end - Angular and back end - .Net c#) that will work on Cloud.
We are using Telerik report designer to create reports. Currently user can view designed Telerik reports inside application through telerik Angular report viewer.

What we want to do: we want user (not developer) to be able to change Telerik report inside application and save them for later use.

We know that Telerik Web Report Designer allows us to customize reports inside web application. 

But there are no resources or documentations on how to implement it in an Angular application.

we wonder if anyone has tried Web Report Designer on Angular applications before and appreciate

if they can share their knowledge/experience.

Thank you

[Veronika]

Hi Ranil,

At the moment, developing an angular wrapper for the Telerik Web Report Dеsigner(WRD) is in our roadmap, but when we could deliver it, I could not tell. There is a feature request (Web Report Designer in Angular), for which you could vote, so the priority for it to rise and see it live sooner.

As there are other requests for this, from other users, I tested a few solutions and I managed to run the WRD in an Angular application. I attached a demo project, so you could see exactly how I did it. The project is in .NET Core, but the solution should work for any angular application. 

There is something important, that I have to share with you. There is a little bug in our Telerik Angular Report Viewer, that brakes the WRD. The bug is logged in our internal system and will be fixed as soon as possible. With one word, I could not manage to run them both in one application. The good news is that you could use the jQuery version of the Telerik Report Viewer with the WRD.  Here are the steps that I have done:

First, I linked the required scripts in the index.html - jQuery, Kendo, Telerik Report Viewer, and Telerik Web Report Designer. It is important jQuery to be loaded before Telerik sources, so we could register the Designer and the Viewer as jQuery plugins. Also, It is important to make sure that this will be the only jQuery instance used in the project.

Second, remove all imports of the Telerik Angular Report Viewer from the project.

And last, I imported the jQuery in the component, where the Designer will be created. In the demo project, this is the designer.component.ts. 
The logic for the Telerik Report Viewer is the same in viewer.component.ts.

One more thing that you should keep in mind. The current version of the Web Report Designer does not support theming. The Web Report Designer is using a customized version of the Kendo SASS Default theme, which is automatically uploaded when then the Designer is created. I added a link to this theme in index.html, in order to apply some styling to the project. In viewer.component.ts, you can see that I check if the styles are loaded more than once, and clean up the last one. This, of course, could be handled in other ways. It depends on the project.

Navigating to the "ClientApp" folder and running npm i and after that npm start, should be enough.

Best Regards,
Veronika
Progress Telerik

[Ray]

Hi Veronika,

Thank you very much for your response. We'll vote for the feature and try your suggested solution.

appreciate it.