PDF VIEWER FIT TO WIDTH on STARTUP

[partamian]

Hi there
Is there anyway to set the PDF VIewer zoom to 'Fit to Width' instead of 'Automatic Width' on startup?

Thanks

Richard

 

 

 

[Dimitar]

Hi Richard,

Currently, there is a possibility of setting the default zoom scale by handling the only the first render event of the PDFViewer as follows:

<script>
  var firstRender = true;
    $(document).ready(function () {
       var vr=  $("#pdfViewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
            },
            width: "100%",
            height: 1200,
            render: function(e) {
              if (firstRender) {
                  e.sender.toolbar.zoom.combobox.value("fitToWidth");
      		  e.sender.toolbar.zoom.combobox.trigger("change");
                firstRender = false;
              }
            }
        }).getKendoPDFViewer();            
    });
</script>

Here is a Dojo example that demonstrates the above.

In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Rey]

Can you define the zoom list?

 

[Neli]

Hi Rey,

You can get a reference to the ComboBox displayed for the zoom levels and set the needed items using the setDataSource method

Here you will find the a Dojo example.

Regards,

Neli

[Simone]

Hello,

I'm using the pdfviewer html helper for asp.net core.

Could you tell me the correct syntax to use inside the helper to use the render method?

 

@(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File("/Documento/Documento/CaricaPDFonDemand?documento=" + @ViewBag.PDFPath))
        .Height(800)
        .ZoomRate(10)
        .Toolbar(toolbar =>
            toolbar.Items(items =>
            {
                items.Add().Name("pager");
                items.Add().Name("spacer");
                items.Add().Name("zoom");
                items.Add().Name("toggleSelection");
                items.Add().Name("spacer");
                items.Add().Name("search");
                items.Add().Name("download");
                items.Add().Name("print");
            })
        )
       
    )

 

I've tried to use the ZoomRate method but it doesn't work.

Thanks

Simone

[Dimitar]

Hello Simone,

The Render event can be used as follows:

@(Html.Kendo().PDFViewer().Name("pdfviewer")
  ...
  .Events(e => e.Render("onRender"))
)

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

Regards,
Dimitar
Progress Telerik

[Simone]

Thanks Dimitar, it works fine.

Simone

[Sotiris]

Hello Dimitar,

In my case, the solution works like a charm but when I check this in case of Responsive Design Mode in case of a mobile of tablet js complains with error below "e.sender.toolbar.zoom.combobox is undefined".

Have you any idea how this could be resolved?

Best regards,

Sotiris

[Neli]

Hello Sotiris,

The observed behavior is expected because on smaller devices we use a native select element instead of Kendo Combobox. You could modify the onRender function as in the example below in order to change the value of the native select element: 

function onRender(e) {
        if (firstRender) {
            if (e.sender.toolbar.zoom.combobox) {
                e.sender.toolbar.zoom.combobox.value("fitToWidth");
                e.sender.toolbar.zoom.combobox.trigger("change");
            } else {
                e.sender.toolbar.zoom.element.find('select').val('fitToWidth')
                e.sender.toolbar.zoom.element.find('select').trigger("change");
            }
            firstRender = false;
        } 
    }

I hope this helps.

Regards,

Neli
Progress Telerik

[Sotiris]

Hi Neli,

Thanks a lot for the workaround, it works fine!

Best regards,

Sotiris