Not being able to change culture

3 Answers 33 Views
PDFViewer
Alexandre
Top achievements
Rank 1
Iron
Alexandre asked on 21 Jul 2021, 08:27 PM

Hi,

I am trying to change the culture for the PDFViewer page of the AspNet.Core example, but it is not working. I have searched this forum and all the documentation available with no success. This is the code I am puting at the beginning of the page:

@section scripts{

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>
    <script src="~/lib/kendo/js/jquery.js"></script>
    <script src="~/lib/kendo/js/kendo.all.min.js"></script>
    <script src="~/lib/kendo/js/cultures/kendo.culture.pt-BR.min.js"></script>

}

<script type="text/javascript">
    //set the Kendo UI culture
    kendo.culture("pt-BR");
</script>

It should work, but the page still shows up with the english language.

I would appreciate any help.

 

3 Answers, 1 is accepted

Sort by
0
Patrick
Telerik team
answered on 26 Jul 2021, 04:15 PM

Hello Alexandre,

In order to add the specific language within the PDFViewer, set the localization to the pr-BR value:

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.pt-BR.min.js"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.pt-BR.min.js"></script>

<script type="text/javascript">
    //set the Kendo UI culture
    kendo.culture("pt-BR");
</script>

That being said, it appears the PDFViewer messages is not available for Brazilian Portuguese quite yet.  If you would like to contribute, please feel free to add the translated messages to our GitHub Repository.

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alexandre
Top achievements
Rank 1
Iron
answered on 26 Jul 2021, 06:20 PM

Hello Patrick,

Thanks for your help, but it is not  working even putting the "messages" line. I had already translated the messages before trying.  In order to check if I had made something wrong, I also tried in the Index page of the Editor Demo, wich was already translated in the kendo.messages.pt-BR.min.js file. I did not work either.

This is the complete source code for the API page of the Demo solution:

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>

    <script src="~/lib/kendo/js/cultures/kendo.culture.pt-BR.min.js"></script>
    <script src="~/lib/kendo/js/messages/kendo.messages.pt-BR.min.js"></script>
    <script type="text/javascript">
        //set the Kendo UI culture
        kendo.culture("pt-BR");
    </script>
}


<div class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Load File</h4>
        <ul class="options">
            <li>
                <button id="loadFile" type="button">Load</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Change page</h4>
        <ul class="options">
            <li>
                <input id="numeric" type="number" title="numeric" value="17" min="1" max="3" step="1" style="width: 100%;" />
            </li>
        </ul>
    </div>
</div>

<div id="example">
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(Url.Content("~/shared/web/pdfViewer/sample.pdf")))
        .Height(700)
    )
</div>

<script>
$(document).on("kendoReady", function () {
    var pdfViewer = $("#pdfviewer").data("kendoPDFViewer");

    var numeric = $("#numeric").kendoNumericTextBox({
        change: onChange,
        spin: onSpin,
        format: "n0",
        value: 1
    }).data("kendoNumericTextBox");

    $("#loadFile").click(function () {
        pdfViewer.fromFile('@Url.Content("~/shared/web/pdfViewer/How Does Kendo UI Cut Development Time.pdf")')
    });

    function onChange(e) {
        var value = this.value();
        changePdfViewerPage(value)
    }

    function onSpin(e) {
        var value = this.value();
        changePdfViewerPage(value)
    }

    function changePdfViewerPage(value) {
        pdfViewer.activatePage(value);
    }
});
</script>

<style>

    html body #pdfviewer {
        width: 100% !important;
    }
</style>


And those are the translated messages:

    if (kendo.ui.PDFViewer) {
        kendo.ui.PDFViewer.prototype.options.messages=
        $.extend(true,kendo.ui.PDFViewer.prototype.options.localization, 
        {
            "defaultFileName": "Documento",
            "toolbar":
            {
                "zoom":
                {
                    "zoomLevel":"nível de zoom",
                    "zoomOut":"Zoom Out",
                    "zoomIn":"Zoom In",
                    "actualWidth":"Largura da Página",
                    "autoWidth":"Largura Automática",
                    "fitToWidth":"Encolher para Caber",
                    "fitToPage":"Encaixar na Página"
                },
                "open":"Abrir",
                "exportAs":"Exportar",
                "download":"Download",
                "pager":
                {
                    "first":"Vá pra a primeira página",
                    "previous":"Vá para a página anterior",
                    "next":"Vá para a próxima página",
                    "last":"Vá para a última página",
                    "of":" de {0} ",
                    "page":"página",
                    "pages":"páginas"
                },
                "print":"Imprimir",
                "toggleSelection":"Habilitar Seleção",
                "togglePan":"Habilitar Panning",
                "search":"Procurar"
            },
            "errorMessages":
            {
                "notSupported":"Apenas arquivos PDF permitidos.",
                "parseError":"Falha no processamento do PDF.",
                "notFound":"Arquivo não encontraoo.",
                "popupBlocked":"Popup bloqueada."
            },
            "dialogs":
            {
                "exportAsDialog":
                {
                    "title":"Exportar...",
                    "defaultFileName":"Documento",
                    "pdf":"Portable Document Format (.pdf)",
                    "png":"Portable Network Graphics (.png)",
                    "svg":"Scalable Vector Graphics (.svg)",
                    labels:
                    {
                        "fileName":"Nome do arquivo",
                        "saveAsType":"Salvar como",
                        "page":"Página"
                    }
                },
                "okText":"OK",
                "save":"Salvar",
                "cancel":"Cancelar",
                "search":
                {
                    "inputLabel":"Procurar texto",
                    "matchCase":"Diferenciar maiúsclas de minúsculas",
                    "next":"Próximo",
                    "previous":"Anterior",
                    "close":"Fechar",
                    "of":"de"
                }
            }
        }
    }

Please, take a look and help me find where I went wrong in the code.

Regards,

Alexandre

0
Patrick
Telerik team
answered on 27 Jul 2021, 01:32 PM

Hello Alexandre,

Based on the translation provided, I have included an updated kendo.messages.pt-BR.js file which can be used in place of the minimized file. 

if (kendo.ui.PDFViewer) {
    kendo.ui.PDFViewer.prototype.options.messages =
    $.extend(true, kendo.ui.PDFViewer.prototype.options.messages, {
        defaultFileName: "Documento",
        toolbar: {
            zoom: {
                zoomLevel: "nível de zoom",
                zoomOut: "Zoom Out",
                zoomIn: "Zoom In",
                actualWidth: "Largura da Página",
                autoWidth: "Largura Automática",
                fitToWidth: "Encolher para Caber",
                fitToPage: "Encaixar na Página"
            },
            open: "Abrir",
            exportAs: "Exportar",
            download: "Download",
            pager:  {
                first: "Vá pra a primeira página",
                previous: "Vá para a página anterior",
                next: "Vá para a próxima página",
                last: "Vá para a última página",
                of: " de {0} ",
                page: "página",
                pages: "páginas"
            },
            print: "Imprimir",
            toggleSelection: "Habilitar Seleção",
            togglePan: "Habilitar Panning",
            search: "Procurar"
        },
        errorMessages: {
            notSupported: "Apenas arquivos PDF permitidos.",
            parseError: "Falha no processamento do PDF.",
            notFound: "Arquivo não encontraoo.",
            popupBlocked: "Popup bloqueada."
        },
        dialogs: {
            exportAsDialog: {
                title: "Exportar...",
                defaultFileName: "Documento",
                pdf: "Portable Document Format (.pdf)",
                png: "Portable Network Graphics (.png)",
                svg: "Scalable Vector Graphics (.svg)",
                labels: {
                    fileName: "Nome do arquivo",
                    saveAsType: "Salvar como",
                    page: "Página"
                }
            },
            okText: "OK",
            save: "Salvar",
            cancel: "Cancelar",
            search: {
                inputLabel: "Procurar texto",
                matchCase: "Diferenciar maiúsclas de minúsculas",
                next: "Próximo",
                previous: "Anterior",
                close: "Fechar",
                of: "de"
            }
        }
    });
}

After including the messages file above, the Kendo UI PDFViewer is shown in Brazilian Portuguese.

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.pt-BR.min.js"></script>
<script src="~/lib/kendo-ui/js/messages/kendo.messages.pt-BR.js"></script>


<script type="text/javascript">
    //set the Kendo UI culture
    kendo.culture("pt-BR");
</script>

Please let me know if you have any questions specific to the localization file.

Regards,
Patrick
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
PDFViewer
Asked by
Alexandre
Top achievements
Rank 1
Iron
Answers by
Patrick
Telerik team
Alexandre
Top achievements
Rank 1
Iron
Share this question
or