This is a migrated thread and some comments may be shown as answers.

Modify Loading Messages

8 Answers 562 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Colin
Top achievements
Rank 1
Colin asked on 25 Feb 2019, 05:01 PM

Is it possible to modify the loading message on a report? ("0 pages loaded so far...") I have two issues:

 

1) By default it loads with orange text/background regardless of the white labeling done in the configuration menu.

2) Some of our reports load slowly, and different text would be helpful to inform the user of such.

8 Answers, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 28 Feb 2019, 08:05 AM
Hi Colin,

If I understood correctly, the requirement is to customize the messages of the Html5 Viewer in the Report Server Manager. This can be done with some minor modifications of the Preview.cshtml View file that could be found in the folder (Telerik Report Server installation folder)\Telerik.ReportServer.Web\Views\Report (for example C:\Program Files (x86)\Progress\Telerik Report Server\Telerik.ReportServer.Web\Views\Report).
To be able to change some of the loading messages, please, add a new JS file (for example called resources.js). It should contain the following of code:

(function (trv, $) {
    "use strict";
    var sr = {
        //warning and error string resources
        loadingReport: 'Loading report... Custom',
        loadingReportPagesInProgress: 'Custom Loading Message {0} pages loaded so far...',
        loadedReportPagesComplete: 'Done. Total {0} pages loaded.',
        noPageToDisplay: "No page to display."
    };
    trv.sr = $.extend(trv.sr, sr);
}(window.telerikReportViewer = window.telerikReportViewer || {}, jQuery));

Then, please, add a reference in the file that contains the Html5 Viewer (or another web page).

<script src="PathToTheFile/resources.js"></script>

Please, check the Localization article that gives the full list with the messages and properties which can be customized. You can see also the attached muted video that demonstrates the above approach. The video can be opened via any web browser with installed Flash plug-in.

About: 1) By default it loads with orange text/background regardless of the white labeling done in the configuration menu.

If you would like to change the background color of the dialog window, please add the following piece of code in the file that contains the Html5 Viewer, i.e. Preview.cshtml (or another web page).

.k-widget.k-tooltip-validation {
         border-color: red;
         background-color: red;
         color: #000;
     }

This will override the default colors (in red in the example above).
In the attached Demo file you can also find a demo project which demonstrates the previously explained approaches. The solution is built against Telerik Reporting version 13.0.19.222. Please, Build the Solution first.

I hope the proposed approach would work for you.
Let me know if you need any additional help.

Regards,
Neli
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

0
Colin
Top achievements
Rank 1
answered on 28 Feb 2019, 09:00 PM
Thanks, Neli. This was extremely helpful!
0
Neli
Telerik team
answered on 04 Mar 2019, 07:36 AM
Hello Colin,

I am really glad that the issue was solved.
Please, let me know if you have any additional questions.

Regards,
Neli
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
0
Joel
Top achievements
Rank 1
answered on 02 Aug 2019, 05:25 PM

Hi Neli, 

Your examples above are perfect for modifying a stand-alone Telerik Report Server, thank you. But can you also help us understand how to achieve the same modifications for a .NET Core Angular stack using the Telerik Angular Report Viewer node.js module? 

We're able to change the css colors of the loading messages by modifying the tooltip style in the index.html. But we're not able to modify the loading text messages unless we edit the telerikReportViewer.js file directly in the node.js module. Which we don't want to rely on since we can't modify node.js pulls in our production branch. We've tried using templateURL settings to point to a local custom telerikRepoerViewerTemplate-sass.html as well as added a telerik_resources.js file as you wrote above being pointed to from the index.html but it still doesn't change the text as desired. We can change the colors, but not the text yet. 

Thank you,

Joel

0
Neli
Telerik team
answered on 07 Aug 2019, 10:43 AM
Hello Joel,

To localize the messages displayed by the Angular Report Viewer, you need to create a new TypeScript file stringResources.ts which will contain the localized strings. Then it has to be imported in the component where the viewer is used. These and all required steps can be found at Localization article for Angular Report Viewer.

Regards,
Neli
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
0
Joel
Top achievements
Rank 1
answered on 25 Feb 2020, 04:49 PM

Hi Neli, 

We couldn't make the above steps work for us and have been trying again recently. Every effort so far returns an "undefined" state for the viewer object including in the ngAfterViewInit method. We're currently using @progress/telerik-angular-report-viewer@9.20.219 with Angular/core 8.2.14 using default Kendo UI SASS. And will upgrade to Angular 9 soon. I've also followed this article to the best of my abilities, adding the #viewer1 to the tr-viewer tag. Any advice will be appreciated. 

 

https://docs.telerik.com/reporting/angular-report-how-to-use-with-angular-cli

 

 

0
Joel
Top achievements
Rank 1
answered on 25 Feb 2020, 06:47 PM

I think I may be onto something. It works if I use AfterViewChecked instead (which is a mess). Looks like its due to our use of a container-fluid to dynamically set the tr-viewer parameters:

<div class="container-fluid" *ngIf="report_model && category_model">
    <app-page-header [title]="report_model.Name"></app-page-header>

    <tr-viewer #viewer1 [containerStyle]="viewerContainerStyle"
    [authenticationToken]="reports_token_model.access_token"
    [reportServer]="{
        url: reports_token_model.report_server
    }" [reportSource]="{
        report: category_model.Name+'/'+report_model.Name,
        parameters: {
            CultureID: 'en',
            PropertyId: session.current_property?.id,
            CurrentUserId: session.user_id
        }
    }" [viewMode]="'INTERACTIVE'" [scaleMode]="'FIT_PAGE_WIDTH'" [scale]="1.0">
    </tr-viewer>

0
Joel
Top achievements
Rank 1
answered on 25 Feb 2020, 09:56 PM

Figured it out. Added a trigger method to assign the viewerObject as the tr-viewer tries to load. First call returns the viewer as undefined, all others work perfectly. Removes need to trying to manually time it with Angular lifecyle hooks. 

 

HTML:

<div class="container-fluid" *ngIf="report_model && category_model">
    <app-page-header [title]="report_model.Name"></app-page-header>

    {{ localization() }} // trigger event to change viewer.viewerObject.stringResources

    <tr-viewer #viewer1 [containerStyle]="viewerContainerStyle"
    [authenticationToken]="reports_token_model.access_token"

 

Typescript:

    localization() {
        //console.log(this.viewer)
        if (this.viewer)
        {
            const language = navigator.language;
            var resources = (language === "ja-JP") ? loadingStatus.japanese :loadingStatus.english;
            this.viewer.viewerObject.stringResources = Object.assign(this.viewer.viewerObject.stringResources, resources);
        }
    }

Moved the StringResources language sets into a local export class called loadingStatus in the component.ts.

export class loadingStatus {
    // override string messages for other languages here, each language set must have same messages modified
    static english = {
        loadingReport: "Loading while the satellite moves into position",
        loadingReportPagesInProgress: "Loading... at least you're not on hold",
        loadedReportPagesComplete: "Crushed it! {0} pages loaded.",
    }
    static japanese = {
        loadingReport: 'ちょっと、まってください...',
        loadingReportPagesInProgress: "読み込み中...少なくとも保留になっていません",
        loadedReportPagesComplete: "潰した! {0}ページが読み込まれました。",
    }
}

Tags
General Discussions
Asked by
Colin
Top achievements
Rank 1
Answers by
Neli
Telerik team
Colin
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Share this question
or