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

Modify Loading Messages

8 Answers 752 Views

General Discussions

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

8 Answers, 1 is accepted

Accepted

answered on 28 Feb 2019, 08:05 AM

Demo.zip

Video.zip

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

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

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:

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:

{{ 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}ページが読み込まれました。",
    }
}