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

how to localize the messages displayed by the MVC Telerik Report Viewer

8 Answers 401 Views

General Discussions

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

Adil asked on 14 Jul 2019, 03:29 PM

Hi Guys

I have some Telerik Reports and i'm using Telerik Report View on MVC Razor view. I can easly translate my data inside Report but i cannot translate ReportView elements like Report Toolbar

How can i handle this? Here below my one of report example.

@{

DateTime today = DateTime.Today;

DateTime startOfMonth = new DateTime(today.Year, today.Month, 1);

DateTime today1 = DateTime.Today;

DateTime endOfMonth = new DateTime(today1.Year, today1.Month, DateTime.DaysInMonth(today1.Year, today1.Month));

UriReportSource trial = new UriReportSource();

trial.Uri = "Card Summary Report.trdx";

trial.Parameters.Add("DateFdy", startOfMonth);

trial.Parameters.Add("DateEnd", endOfMonth);

trial.Parameters.Add("Culture", (string)ViewData["lang"]);

}

@(Html.TelerikReporting().ReportViewer()

.Id("reportViewer1")

.ServiceUrl("/api/reports/")

.ReportSource(trial)

.ViewMode(ViewModes.INTERACTIVE)

.ScaleMode(ScaleModes.SPECIFIC)

.Scale(1.0)

.PersistSession(false)

)

8 Answers, 1 is accepted

answered on 17 Jul 2019, 10:47 AM

Hi Adil,

In general, the localization of the HTML5-based report viewers is based on creating a localization resource file containing the localized text for all string resources for the viewer.

Please check the steps, provided in Localization help article in addition to localize/change the messages displayed by the HTML5 Report Viewer (applicable also to MVC and WebForms wrappers). For example, export toolbar tool-tip could be modified as following:

...

ariaLabelMenuExport: 'Your localized text here',

...

Important note: At step 3, the localization file "resources.<culture>.js" should be placed right after jQuery script and before telerikReportViewer.js file.

Best Regards,
Silviya
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 21 Jul 2019, 11:15 AM

Hi Silviya

I did xactly same things on my code but unfortunal

<!DOCTYPE html>

<html>

<head>

<title>Telerik HTML5 Report Viewer</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

<script src="~/Scripts/kendo/2018.1.117/jquery.min.js"></script> <script src="~/Scripts/kendo/2018.1.117/kendo.all.min.js" type="text/javascript"></script> <script src="~/Scripts/kendo/2018.1.117/kendo.aspnetmvc.min.js" type="text/javascript"></script>

@{

var urlReport = "../../js/Cultures/resources." + ViewData["lang"] + ".js";

}

<script src="@urlReport" type="text/javascript"></script>

<script src="/Reports/js/telerikReportViewer-12.0.18.125.js"></script>

<script>

$(document).ready(function () {

currentPageName = "ReportManagement";

$('#lblsubheader').css("display", "none");

$('#dvlang').css("display", "none");

GetReportsLocalization(1); //for change breadcrumbs

$("#loading").hide();

});

</script>

<style>

#reportViewer1 {

height: 700px !important;

width: 100% !important;

font-family: 'segoe ui', 'ms sans serif';

overflow: hidden;

}

#reportViewer1 .k-button {

display: none;

}

</style>

</head>

<body>

@{

DateTime today = DateTime.Today;

DateTime startOfMonth = new DateTime(today.Year, today.Month, 1);

DateTime today1 = DateTime.Today;

DateTime endOfMonth = new DateTime(today1.Year, today1.Month, DateTime.DaysInMonth(today1.Year, today1.Month));

UriReportSource trial = new UriReportSource();

trial.Uri = "Card Summary Report.trdx";

trial.Parameters.Add("DateFdy", startOfMonth);

trial.Parameters.Add("DateEnd", endOfMonth);

trial.Parameters.Add("Culture", (string)ViewData["lang"]);

}

@(Html.TelerikReporting().ReportViewer()

.Id("reportViewer1")

.ServiceUrl("/api/reports/")

.ReportSource(trial)

.ViewMode(ViewModes.INTERACTIVE)

.ScaleMode(ScaleModes.SPECIFIC)

.Scale(1.0)

.PersistSession(false)

)

</body>

</html>

I have more than one culture on my system and i can easly translate them except Telerik Report... please help me on this subject

I'm also pasting my resource file after jquery before telerikReportViewer.js as you see on code

Thanks

answered on 24 Jul 2019, 10:11 AM

Hi Adil,

If I understood correctly, you did localize the string resources in different languages and pass the corresponding resource file to the viewer to update the texts. However, I'm not sure what means "except Telerik Report...". Do you mean the report's content? If so, then please check Localizing Reports article for more information.

Additionally, may I ask you to open a new support ticket where you can send us the problematic project, so we can investigate further?

Best Regards,
Silviya
Progress Telerik

answered on 25 Jul 2019, 07:27 AM

capture3ec5fdb5c83f43eebeb0779eb0a7e250.png

Hi Silviya

Sorry i cannot complete my text and send it uncomplete anyway. Yes as you said i localize the string resources in different languages and pass the corresponding resource file to the viewer to update the texts and i can also translate Report content .I just want to translate Report Viewer Toolbar ... I shared on image on attachement(Capture.PNG) where i want to translate .I cannot open ticket my support time finished.

Here how i show my report view example . I added js file as you explained on page Localization but it not worked for me...

<!DOCTYPE html>

<html>

<head>

<title>Telerik HTML5 Report Viewer</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

<script src="~/Scripts/kendo/2018.1.117/jquery.min.js"></script>

<script src="~/Scripts/kendo/2018.1.117/kendo.all.min.js" type="text/javascript"></script>

<script src="~/Scripts/kendo/2018.1.117/kendo.aspnetmvc.min.js" type="text/javascript"></script>

@{

var urlReport = "../../js/Cultures/resources." + ViewData["lang"] + ".js";

}

<script src="@urlReport" type="text/javascript"></script>

<script src="/Reports/js/telerikReportViewer-12.0.18.125.js"></script>

<script>

$(document).ready(function () {

currentPageName = "ReportManagement";

$('#lblsubheader').css("display", "none");

$('#dvlang').css("display", "none");

GetReportsLocalization(1); //for change breadcrumbs

$("#loading").hide();

});

</script>

<style>

#reportViewer1 {

height: 700px !important;

width: 100% !important;

font-family: 'segoe ui', 'ms sans serif';

overflow: hidden;

}

#reportViewer1 .k-button {

display: none;

}

</style>

</head>

<body>

@{

DateTime today = DateTime.Today;

DateTime startOfMonth = new DateTime(today.Year, today.Month, 1);

DateTime today1 = DateTime.Today;

DateTime endOfMonth = new DateTime(today1.Year, today1.Month, DateTime.DaysInMonth(today1.Year, today1.Month));

UriReportSource trial = new UriReportSource();

trial.Uri = "Card Summary Report.trdx";

trial.Parameters.Add("DateFdy", startOfMonth);

trial.Parameters.Add("DateEnd", endOfMonth);

trial.Parameters.Add("Culture", (string)ViewData["lang"]);

}

@(Html.TelerikReporting().ReportViewer()

.Id("reportViewer1")

.ServiceUrl("/api/reports/")

.ReportSource(trial)

.ViewMode(ViewModes.INTERACTIVE)

.ScaleMode(ScaleModes.SPECIFIC)

.Scale(1.0)

.PersistSession(false)

)

</body>

</html>

Accepted

answered on 30 Jul 2019, 07:00 AM

Hello Adil,

In the provided code I noticed that the used version of Telerik Reporting is 12.0.18.125. The Report viewer was not localized because this feature was released in version R2 2018 SP1 (12.1.18.620). To be able to localize the viewer, you need to upgrade to at least 12.1.18.620.

When it comes to the localization of the toolbar panel, you need to add customization for the following messages in the resources.js file:

(function (trv, $) {

"use strict";

var sr = {

//warning and error string resources

. . .

menuNavigateBackwardText: 'Navigate Backward Custom',

menuNavigateBackwardTitle: 'Navigate Backward Custom',

menuNavigateForwardText: 'Navigate Forward Custom',

menuNavigateForwardTitle: 'Navigate Forward Custom',

menuRefreshText: 'Refresh Custom',

menuRefreshTitle: 'Refresh Custom',

menuFirstPageText: 'First Page Custom',

menuFirstPageTitle: 'First Page Custom',

menuLastPageText: 'Last Page Custom',

menuLastPageTitle: 'Last Page Custom',

menuPreviousPageTitle: 'Previous Page Custom',

menuNextPageTitle: 'Next Page Custom',

menuPageNumberTitle: 'Page Number Selector Custom',

menuDocumentMapTitle: 'Toggle Document Map Custom',

menuParametersAreaTitle: 'Toggle Parameters Area Custom',

menuZoomInTitle: 'Zoom In Custom',

menuZoomOutTitle: 'Zoom Out Custom',

menuPageStateTitle: 'Toggle FullPage/PageWidth Custom',

menuPrintText: 'Print... Custom',

menuContinuousScrollText: 'Toggle Continuous Scrolling Custom',

menuSendMailText: 'Send an email Custom',

menuPrintTitle: 'Print Custom',

menuContinuousScrollTitle: 'Toggle Continuous Scrolling Custom',

menuSendMailTitle: 'Send an email Custom',

menuExportText: 'Export Custom',

menuExportTitle: 'Export Custom',

menuPrintPreviewText: 'Toggle Print Preview Custom',

menuPrintPreviewTitle: 'Toggle Print Preview Custom',

menuSearchText: 'Search Custom',

menuSearchTitle: 'Toggle Search Custom',

menuSideMenuTitle: 'Toggle Side Menu Custom',

};

trv.sr = $.extend(trv.sr, sr);

}(window.telerikReportViewer = window.telerikReportViewer || {}, jQuery));

Finally add a reference in the page of the viewer.

Regards,
Neli
Progress Telerik

answered on 29 Nov 2023, 04:05 PM

Hello Ignacio,

I am sorry to hear that you have run into issues with localizing the Blazor HTML5 Report Viewer. I will try to provide a step-by-step guide for how to do this but for the most part, the approach is similar to that of the HTML5 Report Viewer - Localization of the HTML5 ReportViewer Explained - Telerik Reporting.

In this example, let's first create a stringResources.bg-BG.js file with the following content:

export var sr = {
    //warning and error string resources
    controllerNotInitialized: "Controller is not initialized.",
    noReportInstance: "No report instance.",
    missingTemplate: "!obsolete resource!",
    noReport: "No report.",
    noReportDocument: "No report document.",
    missingOrInvalidParameter: "There are missing or invalid parameter values. Please input valid data for the following parameters:\n",
    invalidParameter: "Please input a valid value.",
    invalidDateTimeValue: "Please input a valid date.",
    parameterIsEmpty: "Parameter value cannot be empty.",
    cannotValidateType: "Cannot validate parameter of type {type}.",
    loadingFormats: "Loading...",
    loadingReport: "Loading report...",
    preparingDownload: "Preparing document to download. Please wait...",
    preparingPrint: "Preparing document to print. Please wait...",
    errorLoadingTemplates: "Error loading the report viewer's templates. (templateUrl = '{0}').",
    errorServiceUrl: "Cannot access the Reporting REST service. (serviceUrl = '{0}'). Make sure the service address is correct and enable CORS if needed. (https://enable-cors.org)",
    errorServiceVersion: "The version of the Report Viewer '{1}' does not match the version of the Reporting REST Service '{0}'. Please make sure both are running same version.",
    loadingReportPagesInProgress: " До момента са заредени {0} страници.",
    loadedReportPagesComplete: "Done. Total {0} pages loaded.",
    noPageToDisplay: "No page to display.",
    errorDeletingReportInstance: "Error deleting report instance: '{0}'.",
    errorRegisteringViewer: "Error registering the viewer with the service.",
    noServiceClient: "No serviceClient has been specified for this controller.",
    errorRegisteringClientInstance: "Error registering client instance.",
    errorCreatingReportInstance: "Error creating report instance (Report = '{0}').",
    errorCreatingReportDocument: "Error creating report document (Report = '{0}'; Format = '{1}').",
    unableToGetReportParameters: "Unable to get report parameters.",
    errorObtainingAuthenticationToken: "Error obtaining authentication token.",
    clientExpired: "Click 'Refresh' to restore client session.",
    promisesChainStopError: "Error shown. Throwing promises chain stop error.",
    renderingCanceled: "Report processing was canceled.",
    tryReportPreview: "The report may now be previewed.",
    //viewer template string resources
    parameterEditorSelectNone: "clear selection",
    parameterEditorSelectAll: "select all",
    parametersAreaPreviewButton: "Preview",
    menuNavigateBackwardText: "Navigate Backward",
    menuNavigateBackwardTitle: "Navigate Backward",
    menuNavigateForwardText: "Navigate Forward",
    menuNavigateForwardTitle: "Navigate Forward",
    menuStopRenderingText: "Stop Rendering",
    menuStopRenderingTitle: "Stop Rendering",
    menuRefreshText: "Refresh",
    menuRefreshTitle: "Refresh",
    menuFirstPageText: "First Page",
    menuFirstPageTitle: "First Page",
    menuLastPageText: "Last Page",
    menuLastPageTitle: "Last Page",
    menuPreviousPageTitle: "Previous Page",
    menuNextPageTitle: "Next Page",
    menuPageNumberTitle: "Page Number Selector",
    menuDocumentMapTitle: "Toggle Document Map",
    menuParametersAreaTitle: "Toggle Parameters Area",
    menuZoomInTitle: "Zoom In",
    menuZoomOutTitle: "Zoom Out",
    menuPageStateTitle: "Toggle FullPage/PageWidth",
    menuPrintText: "Print...",
    menuContinuousScrollText: "Toggle Continuous Scrolling",
    menuSendMailText: "Send an email",
    menuPrintTitle: "Print",
    menuContinuousScrollTitle: "Toggle Continuous Scrolling",
    menuSendMailTitle: "Send an email",
    menuExportText: "Export",
    menuExportTitle: "Export",
    menuPrintPreviewText: "Toggle Print Preview",
    menuPrintPreviewTitle: "Toggle Print Preview",
    menuSearchText: "Search",
    menuSearchTitle: "Toggle Search",
    menuSideMenuTitle: "Toggle Side Menu",
    sendEmailFromLabel: "From:",
    sendEmailToLabel: "To:",
    sendEmailCCLabel: "CC:",
    sendEmailSubjectLabel: "Subject:",
    sendEmailFormatLabel: "Format:",
    sendEmailSendLabel: "Send",
    sendEmailCancelLabel: "Cancel",
    //accessibility string resources
    ariaLabelPageNumberSelector: "Page number selector. Showing page {0} of {1}.",
    ariaLabelPageNumberEditor: "Page number editor",
    ariaLabelExpandable: "Expandable",
    ariaLabelSelected: "Selected",
    ariaLabelParameter: "parameter",
    ariaLabelErrorMessage: "Error message",
    ariaLabelParameterInfo: "Contains {0} options",
    ariaLabelMultiSelect: "Multiselect",
    ariaLabelMultiValue: "Multivalue",
    ariaLabelSingleValue: "Single value",
    ariaLabelParameterDateTime: "DateTime",
    ariaLabelParameterString: "String",
    ariaLabelParameterNumerical: "Numerical",
    ariaLabelParameterBoolean: "Boolean",
    ariaLabelParametersAreaPreviewButton: "Preview the report",
    ariaLabelMainMenu: "Main menu",
    ariaLabelCompactMenu: "Compact menu",
    ariaLabelSideMenu: "Side menu",
    ariaLabelDocumentMap: "Document map area",
    ariaLabelDocumentMapSplitter: "Document map area splitbar.",
    ariaLabelParametersAreaSplitter: "Parameters area splitbar.",
    ariaLabelPagesArea: "Report contents area",
    ariaLabelSearchDialogArea: "Search area",
    ariaLabelSendEmailDialogArea: "Send email area",
    ariaLabelSearchDialogStop: "Stop search",
    ariaLabelSearchDialogOptions: "Search options",
    ariaLabelSearchDialogNavigateUp: "Navigate up",
    ariaLabelSearchDialogNavigateDown: "Navigate down",
    ariaLabelSearchDialogMatchCase: "Match case",
    ariaLabelSearchDialogMatchWholeWord: "Match whole word",
    ariaLabelSearchDialogUseRegex: "Use regex",
    ariaLabelMenuNavigateBackward: "Navigate backward",
    ariaLabelMenuNavigateForward: "Navigate forward",
    ariaLabelMenuStopRendering: "Stop rendering",
    ariaLabelMenuRefresh: "Refresh",
    ariaLabelMenuFirstPage: "First page",
    ariaLabelMenuLastPage: "Last page",
    ariaLabelMenuPreviousPage: "Previous page",
    ariaLabelMenuNextPage: "Next page",
    ariaLabelMenuPageNumber: "Page number selector",
    ariaLabelMenuDocumentMap: "Toggle document map",
    ariaLabelMenuParametersArea: "Toggle parameters area",
    ariaLabelMenuZoomIn: "Zoom in",
    ariaLabelMenuZoomOut: "Zoom out",
    ariaLabelMenuPageState: "Toggle FullPage/PageWidth",
    ariaLabelMenuPrint: "Print",
    ariaLabelMenuContinuousScroll: "Continuous scrolling",
    ariaLabelMenuSendMail: "Send an email",
    ariaLabelMenuExport: "Export",
    ariaLabelMenuPrintPreview: "Toggle print preview",
    ariaLabelMenuSearch: "Search in report contents",
    ariaLabelMenuSideMenu: "Toggle side menu",
    ariaLabelSendEmailFrom: "From email address",
    ariaLabelSendEmailTo: "Recipient email address",
    ariaLabelSendEmailCC: "Carbon Copy email address",
    ariaLabelSendEmailSubject: "Email subject:",
    ariaLabelSendEmailFormat: "Report format:",
    ariaLabelSendEmailSend: "Send email",
    ariaLabelSendEmailCancel: "Cancel sending email",
    //search dialog resources
    searchDialogTitle: "Search in report contents",
    searchDialogSearchInProgress: "searching...",
    searchDialogNoResultsLabel: "No results",
    searchDialogResultsFormatLabel: "Result {0} of {1}",
    searchDialogStopTitle: "Stop Search",
    searchDialogNavigateUpTitle: "Navigate Up",
    searchDialogNavigateDownTitle: "Navigate Down",
    searchDialogMatchCaseTitle: "Match Case",
    searchDialogMatchWholeWordTitle: "Match Whole Word",
    searchDialogUseRegexTitle: "Use Regex",
    searchDialogCaptionText: "Find",
    searchDialogPageText: "page",
    // Send Email dialog resources
    sendEmailDialogTitle: "Send Email",
    sendEmailValidationEmailRequired: "Email field is required",
    sendEmailValidationEmailFormat: "Email format is not valid",
    sendEmailValidationSingleEmail: "The field accepts a single email address only",
    sendEmailValidationFormatRequired: "Format field is required",
    errorSendingDocument: "Error sending report document (Report = '{0}')."
  };

We will export the sr object so that we can pass it to the viewer reference and update its string resources. The easiest way to get the reference of the viewer is through the renderingBegin event, you may visit the Handling Blazor Report Viewer Events - Telerik Reporting article for details on how to use the events of the blazor viewer.

In this example, the handler function may be put in the _Host.cshtml/_Layout.cshtml file of the Blazor Server project and for Blazor WASM the wwwroot/index.html can be used. The script can look as follows:

   <script type="module">
       import { sr } from '/stringResources.bg-BG.js'

       window.trvEventHandlers = {
           renderingBegin: function (e) {
               var rv = e.data.sender;
               rv.stringResources = $.extend(rv.stringResources, sr);
           }
       }
    </script>

Then, in the Blazor HTML5 Report Viewer component, we need to let it know the name of the handler function:

<ReportViewer @ref="reportViewer1"
              ViewerId="rv1"
              ServiceUrl="/api/reports"
              ReportSource="@(new ReportSourceOptions
                              {
                                  Report = "Report Catalog.trdp",
                              })"
              ClientEvents="@(new ClientEventsOptions() {
                                  RenderingBegin = "trvEventHandlers.renderingBegin"
                              })" />

This way, the viewer may be localized and if you need to change the language at any later point, you can get a reference of the viewer object through the telerik_ReportViewer function, then assign a new string resources object:

var rv = $("#reportViewer1").data("telerik_ReportViewer");
rv.stringResources = $.extend(rv.stringResources, sr);

However, since this blazor viewer is a wrapper, you would need to use JSInterop to update the string resources after the viewer has been initialized - ASP.NET Core Blazor JavaScript interoperability (JS interop) | Microsoft Learn.

I hope this will help.

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our roadmap and feedback portal pages, enjoy a smooth take-off with our Getting Started resources, or visit the free self-paced technical training at https://learn.telerik.com/.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

how to localize the messages displayed by the MVC Telerik Report Viewer

8 Answers, 1 is accepted