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

7 posts, 1 answers
  1. Adil
    Adil avatar
    7 posts
    Member since:
    Mar 2014

    Posted 14 Jul Link to this post

    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)
    )
  2. Silviya
    Admin
    Silviya avatar
    413 posts

    Posted 17 Jul Link to this post

    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
  3. Adil
    Adil avatar
    7 posts
    Member since:
    Mar 2014

    Posted 21 Jul in reply to Silviya Link to this post

    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" />

     

         <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

     

  4. Silviya
    Admin
    Silviya avatar
    413 posts

    Posted 24 Jul Link to this post

    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
    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
  5. Adil
    Adil avatar
    7 posts
    Member since:
    Mar 2014

    Posted 25 Jul in reply to Silviya Link to this post

    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" />
      
     
         <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>
  6. Answer
    Neli
    Admin
    Neli avatar
    147 posts

    Posted 30 Jul Link to this post

    Hello Adil,

    In the provided code I noticed that the used version of Telerik Reporting is 12.0.18.125The 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
    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
  7. Adil
    Adil avatar
    7 posts
    Member since:
    Mar 2014

    Posted 30 Jul Link to this post

    Hi Neli

     

    After update i can translate strings

     

    Thank you for help

Back to Top