Full Screen Button in PDFViewer

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET Core Upload
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1114 version

Description

How can I add a button that opens the PDF file in full screen when using the PDFViewer component?

Solution

1. Create a custom button in the Toolbar() configuration and specify a toggle event handler.
2. Use the requestFullscreen() and exitFullscreen() methods to toggle the fullscreen mode.

Razor

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>

    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf
            .File(c => c.Url(Url.Content("~/Document.pdf")))
        )
        .Toolbar(tb => tb.Items(item => item
            .Add()
            .Name("myCustomTool")
            .Icon("fullscreen")
            .Togglable(true)
            .Type("button")
            .Toggle("toggleBtn")
        ))
        .Height(1200)
    )

Razor

     @addTagHelper *, Kendo.Mvc

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>

    <kendo-pdfviewer name="pdfviewer" height="1200">
        <pdfjs-processing file="@Url.Content("~/Dpocumet.pdf")" />
        <toolbar>
            <pdfviewer-toolbar-items>
                <pdfviewer-toolbar-item name="myCustomTool" icon="fullscreen" togglable="true" type="button" toggle="toggleBtn">
                </pdfviewer-toolbar-item>
            </pdfviewer-toolbar-items>
        </toolbar>
    </kendo-pdfviewer>

JS

<script>
    function toggleBtn(ev) {
        var viewerElement = kendo.widgetInstance($("#pdfviewer")).element[0];
        if (getFullscreenElement()) {
            document.exitFullscreen();
        } else {
            viewerElement.requestFullscreen();
        }
    }

    function getFullscreenElement() {
        return document.fullscreenElement
            || document.webkitfullscreenElement
            || document.mozfullscreenElement
            || document.msfullscreenElement
    }
</script>

More ASP.NET Core PDFViewer Resources

• ASP.NET Core PDFViewer Documentation

• ASP.NET Core PDFViewer Demos

• ASP.NET Core PDFViewer Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the PDFViewer for ASP.NET Core

• Server-Side API Reference of the PDFViewer for ASP.NET Core

• Server-Side TagHelper API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base