Set PDFViewer scale to Fit to Width

[mathieu]

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 ?

[Attila Antal]

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

[mathieu]

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