Set PDFViewer scale to Fit to Width

1 Answer 241 Views
PdfViewer
mathieu
Top achievements
Rank 1
Iron
mathieu asked on 14 Jun 2023, 08:14 AM | edited on 15 Jun 2023, 10:17 AM

Hi,

I have several PDFViewer in different pages of my application, contained in div that can be collapsed.

Depending of the pages the div can be collapsed or not at loading of the page.

For the ones that are not collapsed, the PDFViewer scale is set to "Fit to Width" and the scaling is ok.

However, for the ones that are in collapsed div, the "Fit to Width" setting is not processed.

Attached is a project with the described behavior.

 

Is there a way to manage the scaling properly on collapsed PDFViewer ?

1 Answer, 1 is accepted

Sort by
0
Accepted
Attila Antal
Telerik team
answered on 15 Jun 2023, 10:37 AM

Hello Mathieu,

The automatic scaling only works if the parent element is visible. Since the PdfViewer's parent element is initially hidden, the dimensions are unknown, therefore the Height, Width, and Scale do not get adjusted.

What you can do is refresh the pdfViewer upon expanding the panel.

Here is an example approach that you can try:

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function (e) {
        this.classList.toggle("active");
        this.classList.toggle("collapsed");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.display = "none";
            content.style.maxHeight = null;
        } else {
            content.style.display = "block";
            content.style.maxHeight = content.scrollHeight + "px";
            refreshPdfViwer(e);
        }

        if (this.classList.contains("forceRefresh")) {
            setTimeout(refreshCollapseEntity, 200);
        }
    });
}

function refreshPdfViwer(e) {
    var targetCollapsible = e.target;
    var collapsibleWrapper = targetCollapsible.parentElement;

    var pdfViewerElement = collapsibleWrapper.querySelector('.RadPdfViewer');

    try {
        var pdfViewer = collapsibleWrapper.querySelector('.RadPdfViewer').control;
        pdfViewer.repaint();
    } catch (e) {
        // Oh no! PdfViewer object does not exists
    }
}

 

Regards,
Attila Antal
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
mathieu
Top achievements
Rank 1
Iron
commented on 15 Jun 2023, 11:50 AM

Hello Attila Antal,

Thank you for you quick answer. I've tried several workarounds but hadn't thought about this one.

It works perfectly.

As always great support by the team 👍

Have a nice day

Tags
PdfViewer
Asked by
mathieu
Top achievements
Rank 1
Iron
Answers by
Attila Antal
Telerik team
Share this question
or