Localization toolbar

[Piotr Wanat]

Is it possible to set a localization toolbars zoom or search button ?  From code behind possible is pages manipulate only eg.  RadPdfViewer1.MessagesSettings.ToolBarMessages.PagerMessages.Pages = "xxx" but not zoom in, zoom out , zoom combobox or search and search form.

I looked in the Documentation and saw nothing about it.

 

Best Regards

[Vessy]

Hi Piotr,

This can be achieved using JavaScript code. I am afraid the mentioned options do not have built-in properties to change their text automatically. Below you can find a sample demonstrating how you can change the text of the desired elements:

        <script>
            var $ = $ || $telerik.$;
            function onLoad(viewer, arhs) {
                var combo = viewer.get_toolBarComboBox();
                var toolBarEl = viewer.get_toolBar().element[0];

                $(toolBarEl).find(".k-button-icon").each(function (e) {
                    switch ($(this).attr("title")) {
                        case "Zoom Out": $(this).attr("title", "Custom Zoom Out"); break;
                        case "Zoom In": $(this).attr("title", "Custom Zoom In"); break;
                        case "Enable Selection": $(this).attr("title", "Custom Enable Selection"); break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;
                        case "Search": $(this).attr("title", "Custom Search"); break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;

                        default: break;
                    }
                });

                combo.bind("open", function (e) {
                    $(combo.items()).each(function (e) {
                        changeText($(this));
                    });
                });

                combo.bind("change", function (e) {
                    changeText(combo);
                });

                function changeText(object) {
                    switch (object.text()) {
                        case "Automatic Width": object.text("Custom Automatic Width"); break;
                        case "Actual Width": object.text("Custom Actual Width"); break;
                        case "Fit to Width": object.text("Custom Fit to Width"); break;
                        case "Fit to Page": object.text("Custom Fit to Page"); break;
                        default: break;
                    }
                }
            }
        </script>

        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer2" Height="400px" Width="800px">
            <ClientEvents OnLoad="onLoad" />
            <PdfjsProcessingSettings File="documents/PdfDocument.pdf">
            </PdfjsProcessingSettings>
        </telerik:RadPdfViewer>

Regards,
Vessy
Progress Telerik

[Piotr Wanat]

Thank you for response. It works fine. I have one question more: how to change localization on "search" form : search text, match case, page of pages, previous match, next match, close ? I suppose that javascript too but how ?

Best Regards

[Vessy]

Hi Piotr,

The pager can be localized through the localization messages of the PdfViewer:

https://docs.telerik.com/devtools/aspnet-ajax/controls/pdfviewer/accessibility-and-internationalization/localization#toolbar-messages

As for the Search dialog - you can localize it with JavaScript in a similar way:

        <script>
            var $ = $ || $telerik.$;
            function onLoad(viewer, arhs) {
                var combo = viewer.get_toolBarComboBox();
                var toolBarEl = viewer.get_toolBar().element[0];

                $(toolBarEl).find(".k-button-icon").each(function (e) {
                    switch ($(this).attr("title")) {
                        case "Zoom Out": $(this).attr("title", "Custom Zoom Out"); break;
                        case "Zoom In": $(this).attr("title", "Custom Zoom In"); break;
                        case "Enable Selection": $(this).attr("title", "Custom Enable Selection"); break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;
                        case "Search": $(this).attr("title", "Custom Search");
                            $(this).bind("click", function (e) {
                                changeSearchText();
                            });
                            break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;

                        default: break;
                    }
                });

                combo.bind("open", function (e) {
                    $(combo.items()).each(function (e) {
                        changeText($(this));
                    });
                });

                combo.bind("change", function (e) {
                    changeText(combo);
                });

                function changeText(object) {
                    switch (object.text()) {
                        case "Automatic Width": object.text("Custom Automatic Width"); break;
                        case "Actual Width": object.text("Custom Actual Width"); break;
                        case "Fit to Width": object.text("Custom Fit to Width"); break;
                        case "Fit to Page": object.text("Custom Fit to Page"); break;
                        default: break;
                    }
                }

                function changeSearchText() {
                    setTimeout(function () { //to ensure that dialog pop-up is loaded
                        var dialog = $(".RadPdfViewer_SearchDialog");
                        dialog.find(".k-search-dialog-input").attr("title", "Custom Search Text");
                        dialog.find(".k-search-matches").html(dialog.find(".k-search-matches").html().replace(" of ", " custom of "));

                        $(dialog).find(".k-button-icon").each(function (e) {
                            switch ($(this).attr("title")) {
                                case "Match Case": $(this).attr("title", "Custom Match Case"); break;
                                case "Previous Match": $(this).attr("title", "Custom Previous Match"); break;
                                case "Next Match": $(this).attr("title", "Custom Next Match"); break;
                                case "Close": $(this).attr("title", "Custom Close"); break;

                                default: break;
                            }
                        })

                    }, 500)
                }
            }
        </script>

 

Regards,
Vessy
Progress Telerik

[Piotr Wanat]

Thank you for reply. Unfortunatelly line

dialog.find(".k-search-matches").html(dialog.find(".k-search-matches").html().replace(" of ", " z "));

causes bug : position index of matches shows always "0 z 0"

 

Best Regards 

Piotr

[Vessy]

Hi Piotr,

You are right, this row seems to break the kendo PDF viewer matches functionality.

I examined the source code of the kendo pdfviewer widget and it turned out that there are already implemented search-box messages, which are not publicly documented yet (and not exposed in RadPdfViewer, respectively). You can pass the localization messages for them like follows:

        <script>
            var $ = $ || $telerik.$;
            function onLoad(viewer, arhs) {
                var combo = viewer.get_toolBarComboBox();
                var toolBarEl = viewer.get_toolBar().element[0];

                $(toolBarEl).find(".k-button-icon").each(function (e) {
                    switch ($(this).attr("title")) {
                        case "Zoom Out": $(this).attr("title", "Custom Zoom Out"); break;
                        case "Zoom In": $(this).attr("title", "Custom Zoom In"); break;
                        case "Enable Selection": $(this).attr("title", "Custom Enable Selection"); break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;
                        case "Search": $(this).attr("title", "Custom Search");
                            break;
                        case "Enable Panning": $(this).attr("title", "Custom Enable Panning"); break;

                        default: break;
                    }
                });

                combo.bind("open", function (e) {
                    $(combo.items()).each(function (e) {
                        changeText($(this));
                    });
                });

                combo.bind("change", function (e) {
                    changeText(combo);
                });

                function changeText(object) {
                    switch (object.text()) {
                        case "Automatic Width": object.text("Custom Automatic Width"); break;
                        case "Actual Width": object.text("Custom Actual Width"); break;
                        case "Fit to Width": object.text("Custom Fit to Width"); break;
                        case "Fit to Page": object.text("Custom Fit to Page"); break;
                        default: break;
                    }
                }

                var options = {
                    messages: {
                        dialogs: {
                            search: {
                                inputLabel: "Custom Search Text",
                                matchCase: "Custom Match Case",
                                next: "Custom Next Match",
                                previous: "Custom Previous Match",
                                close: "Custom Close",
                                of: "custom of"
                            }
                        }
                    }
                };

                viewer.get_kendoWidget().setOptions(options);
            }
        </script>

Regards,
Vessy
Progress Telerik

[Piotr Wanat]

Excellently ! It works fine. You are great. Thanks 

 

Best Regards

Piotr

[Vessy]

Hi,

You are welcome, Piotr! I am always happy to help :)

Regards,
Vessy
Progress Telerik