This is a migrated thread and some comments may be shown as answers.

PDF VIEWER FIT TO WIDTH on STARTUP

7 Answers 278 Views
PDFViewer
This is a migrated thread and some comments may be shown as answers.
partamian
Top achievements
Rank 1
partamian asked on 07 Feb 2020, 03:47 PM

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

Thanks

Richard

 

 

 

7 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 12 Feb 2020, 06:33 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Simone
Top achievements
Rank 1
answered on 22 Jun 2020, 12:26 PM

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

0
Dimitar
Telerik team
answered on 23 Jun 2020, 06:31 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Simone
Top achievements
Rank 1
answered on 24 Jun 2020, 07:07 PM

Thanks Dimitar, it works fine.

Simone

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 24 Mar 2021, 04:27 PM

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

0
Neli
Telerik team
answered on 29 Mar 2021, 10:42 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 30 Mar 2021, 09:19 AM

Hi Neli,

Thanks a lot for the workaround, it works fine!

Best regards,

Sotiris

Tags
PDFViewer
Asked by
partamian
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Simone
Top achievements
Rank 1
Sotiris
Top achievements
Rank 1
Veteran
Iron
Neli
Telerik team
Share this question
or