Enabling the report selection in the Angular 7 report viewer

15 posts, 0 answers
  1. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 23 Oct 2019 Link to this post

    Hey

    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
  2. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 23 Oct 2019 in reply to Gurpreet Link to this post

    It's also not any of these options: 

    <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>
  3. Todor
    Admin
    Todor avatar
    452 posts

    Posted 28 Oct 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 28 Oct 2019 in reply to Todor Link to this post

    The side pane is present in the HTML5 report view - see attached file.  If the Angular viewer is based on the HTML viewer, and the HTML viewer has the pane that I want to enable, and it works in the HTML viewer, then where is it in the Angular version?

    Which option in the link you provided, will show that pane?
  5. Todor
    Admin
    Todor avatar
    452 posts

    Posted 31 Oct 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 04 Nov 2019 Link to this post

    No, it's a report selection pane .... the pane shows multiple reports that can be selected and loaded.  The pane you claimed doesn't exist we have a picture of, so why can't we enable it.  It's not the document map, and even it was, that's already enabled by default, so it would be loaded. 

    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.
  7. Todor
    Admin
    Todor avatar
    452 posts

    Posted 07 Nov 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 12 Nov 2019 in reply to Todor Link to this post

    I think it's called the Report Parameter Area, although in our case it's a selection of different reports, with a "Preview" button to load them, which is why I've been calling it the Report Selection Area.

    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
  9. Veronika
    Admin
    Veronika avatar
    17 posts

    Posted 15 Nov 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 15 Nov 2019 in reply to Veronika Link to this post

    Hey

    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
  11. Veronika
    Admin
    Veronika avatar
    17 posts

    Posted 18 Nov 2019 Link to this post

    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:

    1. The Report viewer initialization in the old AngularJS application.
    2. 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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 18 Nov 2019 in reply to Veronika Link to this post

    <!DOCTYPE html>
    <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>
     
     
        <!--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
  13. Veronika
    Admin
    Veronika avatar
    17 posts

    Posted 19 Nov 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 21 Nov 2019 in reply to Veronika Link to this post

    We found the issue and It seems  to be a compatibility issue between telerikReportViewerTemplate.html / telerikReportViewer.css of Telerik reporting version 2018 R3  (v12.2.18.1129)   and  Angular 7 viewer.  If we switch  to latest  files of version 2019 R1 then we can see the parameter area in Angular report viewer.  But why we have to replace html and css file with latest version of telerik reporting in Angular 7 viewer ? It should work fine with existing files of version 2018 R3?     
  15. Veronika
    Admin
    Veronika avatar
    17 posts

    Posted 26 Nov 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top