PDF Viewer Default Zoom Level

[John]

How can you set the default Zoom Level on the PDF Viewer?  It defaults to "Automatic Width" but I want it to default to "Fit to Width".

    <kendo-pdfviewer name="pdfviewer">
        <pdfjs-processing file="@(Url.Action("GetReportDownload", "Downloader"))"/>
        <toolbar enabled="true">
        </toolbar>
    </kendo-pdfviewer>

 

[Aleksandar]

Hi John,

Currently there is no configuration option that would allow you to set the default Zoom level, but you can follow the approach demonstrated in this forum thread and handling the render event: https://www.telerik.com/forums/pdf-viewer-fit-to-width-on-startup

<kendo-pdfviewer name="pdfviewer" on-render="onRender">
        <pdfjs-processing file="@(Url.Action("GetReportDownload", "Downloader"))"/>
        <toolbar enabled="true">
        </toolbar>
</kendo-pdfviewer>

<script>
  var firstRender = true;
  function onRender(ev) {
    if (firstRender) {
      e.sender.toolbar.zoom.combobox.value("fitToWidth");
      e.sender.toolbar.zoom.combobox.trigger("change");
      firstRender = false;
    }
  }
</script>

 

Check the thread linked above for further details in case adaptive rendering is used.

Regards,
Aleksandar
Progress Telerik

[Stoyan]

The way to set the default Zoom Level of the PDFViewer has changed since version 2023.1.324. The reason being that all toolbars of the Components have been set up to now use the Kendo UI ToolBar widget internally.

While this change currently doesn't affect the configuration of the Component, nor the behavior it has affected the custom approach in question. 

Instead the up-to-date approach is now:

  function onRender(ev) {
    if (firstRender) {
       var combo = $(".k-combobox-clearable").find("input").last().getKendoComboBox();
       combo.select(2);
       combo.trigger("change");
       firstRender = false;
    }
  }

Try it out in this sample Telerik REPL.

 

Regards,
Stoyan
Progress Telerik