Upgrading TelerikReports to 2023 R3 Trial version, with Angular front end.

[Bob]

I updated my front end package.json to use the Telerik Angular Report Wrapper, and the backend to use Telerik.Reporting 17.2.23.1114 trial:

"@progress/telerik-angular-report-viewer": "^20.23.1114",

 

From the browser, when trying to access the backend `ReportsController` (.Net 4.6), I get the following exception:

<ExceptionMessage>Multiple actions were found that match the request: Formats on type SynWAPI.Controllers.ReportsController GetClientsSessionTimeoutSeconds on type SynWAPI.Controllers.ReportsController Version on type SynWAPI.Controllers.ReportsController</ExceptionMessage>
<ExceptionType>System.InvalidOperationException</ExceptionType>

Now generally when I send a test request to the old version of TelerikReports (14.x) from https://MyApp01.MySite.com/MyApp/api/reports, I get the following response in the browser (however in my upgrade envir it's throwing the above exception):

[{"name":"PDF","localizedName":"Acrobat (PDF) file"},{"name":"CSV","localizedName":"CSV (comma delimited)"},{"name":"XLS","localizedName":"Excel 97-2003"},{"name":"RTF","localizedName":"Rich Text Format"},{"name":"IMAGE","localizedName":"TIFF file"},{"name":"MHTML","localizedName":"Web Archive"},{"name":"XPS","localizedName":"XPS Document"}]

 

In my Angular component html, I'm using the Telerik Wrapper:        

<tr-viewer
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="templateUrl"
>
</tr-viewer>

 

and my `ReportsController` on the backend (.net 4.6)

(based on https://docs.telerik.com/reporting/embedding-reports/host-the-report-engine-remotely/rest-service-report-source-resolver/use-custom-report-source-and-document-resolvers?_ga=2.110664256.43783964.1705943251-1117489418.1701363987&_gl=1*3x39f9*_ga*MTExNzQ4OTQxOC4xNzAxMzYzOTg3*_ga_9JSNBCSF54*MTcwNjExMTg5NC4yMC4xLjE3MDYxMTI5MTMuNDYuMC4w*_gcl_au*NTYzNzA2MTUwLjE3MDEzNjM5ODY. )

using System;
using System.Collections.Generic;
using System.IO;
using System.Web.Http;
using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.WebApi;
using System.Web;
using Telerik.Reporting.Services;
using Telerik.Reporting;

namespace SynWAPI.Controllers
{
    [AllowCrossSiteJson]
    [RoutePrefix("api/reports")]
    public class ReportsController : ReportsControllerBase
    {
        [HttpGet]
        [Route("IsReady")]
        public IHttpActionResult IsReady()
        {
            return Ok("OK Dude !");
        }

        public ReportSource Resolve(string uri, OperationOrigin operationOrigin, IDictionary<string, object> currentParameterValues)
        {
            {
                var appPath = HttpContext.Current.Server.MapPath("~/");
                string reportPath = Path.Combine(appPath, @".\Reports");

                var reportPackager = new ReportPackager();
                Report report = null;
                using (var sourceStream = System.IO.File.OpenRead(reportPath))
                {
                    report = (Report)reportPackager.UnpackageDocument(sourceStream);
                }
               
                return new InstanceReportSource
                {
                    ReportDocument = report
                };
            }
        }
        
        [Obsolete]
        protected override ICache CreateCache()
        {
            return Telerik.Reporting.Services.Engine.CacheFactory.CreateFileCache();
        }
    }
}

 

I can't seem to resolve this issue. Do you have further examples online, or any advice for me here ?

 

thanks,

Bob

 

[Bob]

One interesting thing is using Postman to test the `api/reports/clients` request.

As per our current version of telerikReportView.js (v8.2.14.1027) - this request returns the clientId in our QA environment, as expected:

However, if i test the new one in my local environment at `http://oak-3cvrvv3/HarWAPI/api/reports` I get an error:

(fyi: Telerik.Reporting.Services.WebApi is pointing to v17.2.23.1114)

"ExceptionMessage": "Could not load file or assembly 'Newtonsoft.Json, Version=13.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)",
    "ExceptionType": "System.IO.FileLoadException",
    "StackTrace": "   at Telerik.Reporting.Services.WebApi.ServiceHelper.CreateFormatter()\r\n   at Telerik.Reporting.Services.WebApi.ReportsExceptionFilter.OnException

 

[Dimitar]

Hello Bob,

Thank you for the screenshots and the additional information!

The Reporting REST Service requires version 13.0.0.0 of the Newtonsoft.Json assembly, please add a reference to it or install it to the project via the NuGet Gallery | Newtonsoft.Json 13.0.1 package.

You may see the full requirements at ASP.NET WebAPI REST Report Service Dependencies.

Regarding the issue with the "Multiple actions were found that match the request" message, the problem most probably comes from a greedy route in the routes configuration. I suggest moving the registration of the reporting routes before the default ones, for example, in the following code snippet:

Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(config);

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

The reason is that this way the reporting route will be prioritized and won't be overridden by the greedy ones. If you don't expose other WEB API routes, you may simply delete the default ones.

For an example of the full setup, you may check our .NET Framework web application demos that are shipped with the installation of the product at the C:\Program Files (x86)\Progress\Telerik Reporting R3 2023\Examples\CSharp\.NET Framework path.

I hope that the provided information will help. Please let me know if you need further assistance.

Regards,
Dimitar
Progress Telerik

[Bob]

Also, just to confirm - are the Telerik.Reporting 17.2.23.1114 DLLs backward compatible with .Net Framework 4.6 ?

We were having some issues creating a NuGet package in our .Net Solution.

[Dimitar]

Yes, the Telerik Reporting assemblies are built targeting .NET Framework 4.0 and can be used in any .NET Framework 4+ application. Some are also built for .NET Standard/.NET, you may find all of them in the Bin subdirectory - C:\Program Files (x86)\Progress\Telerik Reporting R3 2023\Bin

[Bob]

This was all very helpful, and the backend .Net project you pointed out helped solved the routes and the ReportsController issue we had. We're finally able to successfully ping the ReportsController and hit a breakpoint.

Our Angular v13 front end piece partially working.

For anyone else reading this in the future, I posted a detailed response on StackOverflow:

   https://stackoverflow.com/questions/77887676/issues-with-telerikreports-upgrade-to-2023-r3-with-angular-front-end-reports-wr/77914489#77914489

 

[Bob]

Our Angular v13 front end piece partially working. We're getting an empty template back to the browser. Something is NOT triggering the actual generation of the final reports HTML file, which is supposed to be returned back to the browser.

[Dimitar]

Are there any failing requests in the browser? For example, check if the template can be found at the specified path:

<tr-viewer
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="templateUrl"
>
</tr-viewer>

I recommend visiting the Loading Report Viewer resources locally in Angular to customize it - Telerik Reporting KB article for guidance on how to load the resources locally rather than from the service.

If the template is found and loaded but there are still problems, could you please record and share here a Fiddler Jam log of the problem - First Steps with the Chrome Extension - Fiddler Jam (telerik.com)?  Even better would be if you could attach a runnable project with the problem so that I can debug it locally.

I will be looking forward to receiving an update from you.

 

[Bob]

Hi Dimitar,

Thank you. We got it working yesterday - front to back ! Telerik docs such as this one - https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/angular-report-viewer/how-to-use-angular-report-viewer-with-report-server - helped us to figure out some things.

We ended up removing `jquery` references to our old `index.html` file, and upgraded jquery via npm. And also updating the "scripts" section of `angular.json.

No issues here: reportSource is an object in our ts class, and the 17.2.23 tempateUrl points to our assets folder. Template comes from the c:\programfiles (after having installed the trial via the .msi package).

<tr-viewer    

    [containerStyle]="viewerContainerStyle"

    [serviceUrl]="serviceUrl"

    [reportSource]="reportSource"

    [viewMode]="'INTERACTIVE'"

    [scaleMode]="'SPECIFIC'"

    [scale]="1.0"

    [templateUrl]="telerikTemplateUrl"

>

</tr-viewer>

[Bob]

Now that our report actually loads in the front end browers, the one odd issue I'm seeing is that our old dropdown list turns into a flat list - no longer a dropdown.

We were thinking that perhaps some css needed to be loaded in index.html, for example:

     <link href="./assets/dependencies/kendo/kendo.common.min.css" rel="stylesheet" />
     <link href="./assets/dependencies/kendo/kendo.blueopal.min.css" rel="stylesheet" />

but all it does is change the styles in my whole application, so def not the desired result. The old dropdown stil does not work.

OLD VERSION:

 

NEW VERSION (flat dropdowns)

In the old `telerikReportViewer-8.2.14.1027.js` I'm finding a kendoDropDownList() as opposed to a kendoListView() in your NEW js code in the dist folder

In the old js code, I do see

         trv.parameterEditors =[{ ...    }]

and this call within that huge array of object:

dropDownList = $dropDownElement.data("kendoDropDownList");

 

and in the new viewer js code, I also see the huge array of objects:

      var ParameterEditors = [{ ... }]

but it appears to be a 

$list.kendoListView({

 

instead of a dropdown. Perhaps this is my problem ?

 

 

[Dimitar]

Indeed, by default the parameters with available values will be displayed with the ListView widget, however, the dropdown option is also still supported through the Kendo ComboBox widget you may use with the following settings:

<tr-viewer #viewer1 
    [containerStyle]="viewerContainerStyle" 
    [serviceUrl]="'http://localhost:59655/api/reports/'"
    [reportSource]="{
        report: 'Product Line Sales.trdp',
        parameters: {}
    }" 
    [parameters]="{
        editors: {
            multiSelect: 'COMBO_BOX',
            singleSelect: 'COMBO_BOX'
        }
    }" >
</tr-viewer>

[Bob]

Oh okay, I missed the editors options in your API reference - https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/angular-report-viewer/api-reference/options

However, it's still rendering as a ListView. Here are both my HTML and TypeScript constructor code:

<tr-viewer    
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="telerikTemplateUrl"
>
</tr-viewer>

constructor(private readonly appSession: AppSession, private readonly config: AppConfigService) {
        this.serviceUrl = this.config.host + GG.SV_REPORTS;       
        this.telerikTemplateUrl = "assets/templates/telerikReportViewerTemplate-FA-17.2.23.1114.html";

        this.reportSource = {
            report: "SynergyReports.ReportCatalog, SynergyReports",
            parameters: {
                UserID: this.appSession.session.User.UserUID,
                SessionID: this.appSession.session.SessionID,
                RootUrl: "",
                editors: {
                    singleSelect: 'COMBO_BOX'
                },
            },
        };
    }

 

Am I missing some other configuration, front or back end ?

Thank you.

[Dimitar]

Hello Bob,

The problem is that the editors setting is defined within the reportSource object, however, it should instead be within the parameters property that is on the same level as the reportSource. For example:

constructor(private readonly appSession: AppSession, private readonly config: AppConfigService) {
        this.parameters = {
                editors: {
                    singleSelect: 'COMBO_BOX'
                },
        };
    }

<tr-viewer    
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [parameters]="parameters"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="telerikTemplateUrl"
>
</tr-viewer>

Please try defining it like this and let me know if that helps.

[Bob]

Ah right. I was confusing the parameters prop with the one under reportSource.

It's working now, thank you.

[Bob]

Hi,

And once we move to at least Angular v14, would you recommend I use the Native Angular Report Viewer instead ? Only diff I can see would be remove to jquery reference...

thanks,

Bob

[Dimitar]

Hello Bob, 

Thank you for the update, I am glad to hear that the correct editors are being loaded now!

Regarding the two Angular report viewers, I would indeed recommend switching to the native Angular Report Viewer if possible. However, please keep in mind that it is built using the Kendo UI Angular suite, and a license for that product is required to use the native viewer.

With that being said, the native viewer should behave better in almost all scenarios since it is built with native angular components. One such example is the angular component's lifecycle events(ngOnInt, etc.). The jquery angular wrapper viewer is initialized via jquery so its reference is null in some of those events, as the jquery code hasn't been run yet.

[Bob]

Thank you for your attention to this matter. Your support is greatly appreciated.

Bob

[Bob]

Hello again Dimitar,

If I may follow up with other questions:

1) I'm looking around to see if I can add a DEFAULT dropdown option to the rendered combo_box - like the 'ALL' option for example. Would I need to do that in the backend report designer, or is it easy on the front end?

In the old v14 js code, I noticed we had option 'ALL' directly coded into the old TelerikViewerv14.js file.

this.parameters = {
                editors: {
                    singleSelect: 'COMBO_BOX'
                },
        };

2) In the dropdowns, the list is bleeding into dropdowns below it. Would I need a specific version of kendo-theme-material package, for example, with telerik-report-viewer v21.24.305 ?

   In the meantime, I'm looking at overriding some classes coming from the backend css, which is linked in your template, telerikReportViewerTemplate-18.0.24.305.html

<link href="{service}resources/styles/telerikReportViewer-18.0.24.305.css/" rel="stylesheet" />

[Dimitar]

Hello Bob,

I noticed that you have opened a separate thread for the last two questions - TelerikReport v18 - Trying to add a default value to ComboBox options in Reporting | Telerik Forums.

I have answered them in the other thread and recommend continuing the discussion there so that it does not get duplicated and we do not discuss multiple topics in a single forum thread.

Thank you for your understading.