I have the Angular 7 report viewer running, and we can load single reports no problem, we can't see the selection pane to pick different reports. How do I enable the selection pane. According to page: https://docs.telerik.com/reporting/angular-report-viewer-api-options what option do I have to enable to get the selection pane enabled, it's not "parameters" or "parameterEditors" as we've tried settings them exactly as described and it doesn't work.
Thanks
14 Answers, 1 is accepted
Rank 1
<button (click)="viewer1.commands.toggleSideMenu.exec()">SIDE MENU</button>
<button (click)="viewer1.commands.toggleParametersArea.exec()">PARAM AREA</button>
<button (click)="viewer1.commands.toggleDocumentMap.exec()">DOC MAP</button>
Hi Gurpreet,
Our Report Viewers can display a single report at a time - the exact report is specified by the reportSource property of the viewer - check Options. We do not have embedded functionality for selecting reports. You need to implement it in custom code. You need to change the reportSource of the viewer based, for example, on a selection from a list of values - check HTML5 Report Viewer(JavaScript declaration) article section for details.
Regards,
Todor
Progress Telerik
Rank 1
Which option in the link you provided, will show that pane?
Hello Gurpreet,
From the screenshot, I guess that you would like to display the Document Map Area. You may set documentMapVisible to True in the Options of the viewer. Note that you may move it with the option documentMapAreaPosition. You need to define bookmark Ids for the items to be displayed in this area - How to: Add a Report Item to Document Map.
Regards,
Todor
Progress Telerik
Rank 1
If the selection pane exists in the HTML Viewer, and the if the Angular viewer is based off the HTML viewer, then where is the report selection pane, I don't how else to phrase the question.
Hello Gurpreet,
Please, check the Html5 Report Viewer areas in its Overview article. I am not sure what you mean by report selection pane. Can you send a sample project that demonstrates what you mean?
If you render a Report Book, it can display the list with the reports in the book in the Document Map area - check for example our online demo. The angular viewer can display the Report Book in the same way. You need to set its reportSource to a Report Book and to show the Document Map area.
Regards,
Todor
Progress Telerik
Rank 1
Assuming it's the Report Parameter Area, how do we get that to show different reports? My co-worker is saying that we shouldn't use a Report Book, the Document Map is the wrong area.
I've attached a new screenshot that might be more clear, this was taken from the HTML5 viewer in our old AngularJS application, now we're on Angular 7. When I implemented the HTML5 Viewer in Angular 7, the side pane isn't showing up and if tell the viewer to exec() the parameter area, it nothing seems to happen. if we click the funnel icon, nothing seems to happen, and that seems to be the button to toggle report parameter area.
Thanks
Hi Gurpreet,
As I can understand the situation there is something that is missing in the initialization.
One thing that could cause the issue is if the parameters object is not parsed correctly or it is not complete. In Angular project this setting should be something like this:
[reportSource]="{
report: 'Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null',
parameters: { your parameters }
}"Another way to do it is through setReportSource method.
In order to be more helpful, may I ask you to send us the Report and the Telerik Report Viewer definitions in both - old AngularJS application and Angular 7, so we could see where the issue is and what are the differences.
Also I would like to ask, do you have a custom parameters editors in the old AngularJS? The implementation should be something like this code . If the answer is yes, please send us the code too.
A demo projects, with both frameworks, that could help us to reproduce the issue, it would be better as there are a lot of things in the project set up that could influence the behavior.
Regards,
Veronika
Progress Telerik
Rank 1
Thanks for your reply, this is how we're calling the viewer:
<tr-viewer #viewer1
[containerStyle]="viewerContainerStyle"
[serviceUrl]="serviceURL"
[reportSource]="{report: filename, parameters: parameters}"
[viewMode]="'PRINT_PREVIEW'"
[scaleMode]="'FIT_PAGE_WIDTH'"
[scale]="1.0">
</tr-viewer>
This is how we set the filename and the parameters:
const assetId = this.storage.getFromStorage('selectedAssetID');
const reportName = event.filename.split('.');
this.filename = event.filename + '-' + assetId;
this.parameters = {
ReportUser: this.storage.getFromStorage('firstName') + ' ' + this.storage.getFromStorage('lastName'),
MunicipalLogo: 'Images/customLogo.png',
MunicipalName: this.storage.getFromStorage('name'),
ReportType: reportName[0],
AssetTypeId: assetId,
UserId : this.storage.getFromStorage('userName')
};
I'll try to get some demo code put together later today, although in our case it might be hard because the reports are sent from our backend and we'd have to give you some kind of login to access it, which I'm pretty sure won't fly.
Thanks
Hi Gurpreet,
I have reviewed the provided sample code and could not see anything in it that could cause the issue. Thus I will need:
- The Report viewer initialization in the old AngularJS application.
- Did I understand correctly that there are not custom parameter editors in the old AngularJS application? If this is the case please send us the custom parameter editors.
I`m looking forward to the project. It will faster the process to resolving the issue.
Regards,
Veronika
Progress Telerik
Rank 1
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>DOT Report Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <link href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" rel="stylesheet" /> <!--kendo.web.min.js or kendo.all.min.js can be used as well instead of the following custom Kendo UI--> <!--<script src="/ReportViewer/js/kendo.subset.2015.3.930.min.js"></script> <script src="/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.js"></script>--> <script src="/ReportViewer/js/telerikReportViewer.kendo-12.2.18.1129.min.js"></script> <script src="/ReportViewer/js/telerikReportViewer-12.2.18.1129.min.js"></script> <style> #reportViewer1 { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; overflow: hidden; font-family: Verdana, Arial; } </style></head><body> <div id="reportViewer1"> loading... </div> <script type="text/javascript"> $(document).ready(function () { let _getCookie = cname => { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1); if (c.indexOf(name) === 0) return c.substring(name.length, c.length); } return ""; }; var filename = window.location.search.substr(window.location.search.lastIndexOf('=') + 1); let filename2 = window.location.search.substr(window.location.search.lastIndexOf('=') + 1); /* Strip the extension off the report */ filename2 = filename2.replace(/\.[^/.]+$/, "") let email = _getCookie('username'); let name = _getCookie('name'); $("#reportViewer1") .telerik_ReportViewer({ // The URL of the service which will serve reports. // The URL corresponds to the name of the controller class (ReportsController). // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html. serviceUrl: "https://<;valid end point>/api/ReportViewer", // The URL for custom report viewer template. The template can be edited - // new functionalities can be added and unneeded ones can be removed. // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html. //templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-11.0.17.118.html', //ReportSource - report description reportSource: { // The report can be set to a report file name (trdx report definition) // or CLR type name (report class definition). report: filename, parameters: { ReportUser: email, MunicipalLogo: 'Images/customLogo.png', MunicipalName: name, ReportType: filename2 } }, // Specifies whether the viewer is in interactive or print preview mode. // PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled. // INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled. viewMode: telerikReportViewer.ViewModes.PRINT_PREVIEW, // Sets the scale mode of the viewer. // Three modes exist currently: // FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height. // FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match. // SPECIFIC - Uses the scale to zoom in and out the report. scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, // Zoom in and out the report using the scale // 1.0 is equal to 100%, i.e. the original size of the report scale: 1.0, ready: function () { this.refreshReport(); }, }); }); </script></body></html>This report viewer loads correctly, as I took the screenshots from it, If we take this code and dump it into Angular 7 as a component, and get that component to load a report, it has the EXACT same issue as the Angular 7 viewer.
Why?
We can't give you access to our backend, so you'd have no way to load the reports, please show us sample code that has a working report parameter area, with a selection of loadable reports and that works on the Angular 7 viewer. The file I posted, has a working report parameter area, and on AngularJS it has no problems.
I have posted the exact parameter section we use and the exact call we make to the Angular 7 viewer, which should be all you need, feel free to spin up a project of your own and demonstrate it working.
Thanks
Hi Gurpreet,
Based on the sample code and the provided information we can not tell why the Report Viewer does not work. I made a demo project with simple report, that does what I understand it should. A parameter in the Parameter area, change the visible report. Is this correct? Run the RestService first, after that in the "CLI" folder is the angular project. npm install and ng serve should be enough.
Review the example and if it does not help you to fix the issue, modify the code, reports everything that it is different in the demo project, so the issue is reproducible. Send it back to us, so we could debug it on our end.
Best Regards,
Veronika
Progress Telerik
Rank 1
Hi Gurpreet,
As I can understand telerikReportViewerTemplate.html and telerikReportViewer.css files are local resources (they are not served by our service). Is this correct? If they are, then every time you upgrade, those files should be updated too, manually. All Telerik Report Viewer resources(javascript, templates and CSS files) should be the same version.
The reason why the Viewer does not work with the files from 2018 R3 version is that in version 2019 R1 a lot of new functionality has been added:
- continuous pages scroll
- parameters input flexibility
- splitter for parameters and document map areas
All the above require changes not only for the javascript but also for the template and CSS.
I strongly recommend upgrading to the latest official version, because during the last year the Viewer has been substantially improved. I'm sure you will find it way better than 2019 R1.
Best Regards,
Veronika
Progress Telerik