PDF Viewer Default Zoom Level

2 Answers 590 Views
PDFViewer
John
Top achievements
Rank 2
Iron
Iron
Iron
John asked on 13 May 2021, 12:47 PM

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>

 

2 Answers, 1 is accepted

Sort by
1
Accepted
Aleksandar
Telerik team
answered on 18 May 2021, 08:25 AM

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

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.

0
Stoyan
Telerik team
answered on 02 May 2023, 01:05 PM

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

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
John
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Aleksandar
Telerik team
Stoyan
Telerik team
Share this question
or