Report Viewer design

[Rajesh]

Hi Team,

We are using telerik reporting in Angular applications.

We have two queries regarding report designing

1) Report designing:

Our current report viewer looks like the attached "Current.png" (The below A, B, C points are highlighted in the image)

We need to design the viewer like the attched "Expected.png"

A) Is it possible to move the right side filter section (report parameters) to the top as horizontal
B) Is it possible to hide the "Tool Bar" and display only "Print" with PDF option
C) Can we have "DropDown" and "Raddio Button" to the filter section in the "Report Viewer"


2) Report designing:

If it is not possible to disign the "Report Viewer" as explained in the section 1, we will design our own Angular web application with the expected GUI.

Are there any telerik reporting API's to generate PDF of our web page.

Thanks,
Rajesh

[Todor]

Hello Rajesh,

1. The Angular Report Viewer is a wrapper of the pure Html5 Report Viewer. The latter uses HTML5 template and CSS3 styles for its layout and is fully customizable. You may create a custom template and design the layout of the report viewer as needed - check :
- Templates Overview
- Templates Structure
- Providing Custom Templates

To modify the Parameter editors, check the How To: Create a Custom Parameter Editor article. Alternatively, you may use customs widget to get the parameter values and pass them to the viewer as explained in the How To: Pass Values to Report Parameters article.

For localization, check the Angular Localization article.

From the screenshot for the expected layout I see that you need a scrollbar for a single report item, e.g. Table. This is more like a dashboard and we do not support it currently as the Reporting tool is designed with printing in mind.

2. The reports for all Html5 based web report viewers are generated by a Telerik Reporting REST Service. Indeed, you may use the REST API of the service to request the reports from a custom client. The Html5 Viewer utilizes the same REST API - you may use Fiddler to check this.

Regards,
Todor
Progress Telerik

[Rajesh]

Thanks for the reply!

As I see the links provided by you in point1, points to HTML5 Viewer documentation.

But we are using Angular technology in our client. Dow we have same customization in Angular report viewer as well?

Do you have any example of this implementation, if so please share it with us. it will be helpful.

 

[Rajesh]

Hi Team,

Another query regarding report designing, we have requirement to generate report as per the PNG file attached. 

Do we have the possibility of the customization defined in the PNG file ?

[Todor]

Hi Rajesh,

We provide also an Angular Report Viewer, which is a wrapper of the pure Html5 Report Viewer for the Angular framework. The Angular Viewer utilizes the same template as the pure Html5 Viewer. You may check how to provide a custom template in the Angular Viewer Options.
An Angular example can be found in our demos that come with the installation of Telerik Reporting. By default they get deployed in (Telerik Reporting installation folder)\Examples\Angular\CLI or SystemJS (e.g. C:\Program Files (x86)\Progress\Telerik Reporting R2 2019\Examples\Angular\CLI).

Concerning the design of the report, from the screenshot I think you may achieve it. I am not sure about the comments over the report layout as they are in (Italian) language we do not support. Our official communication language is English.
Consider opening a support ticket where to elaborate on the scenario. You may attach a sample report with dummy data so that we can better understand the requirements.

Regards,
Todor
Progress Telerik