Not being able to change culture

[Alexandre]

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.

 

[Patrick | Technical Support Engineer, Senior]

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

[Alexandre]

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

[Patrick | Technical Support Engineer, Senior]

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