New to Telerik UI for ASP.NET Core? Download free 30-day trial

Full Screen Button in PDFViewer


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


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


  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.
    <script src=""></script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';

        .PdfjsProcessing(pdf => pdf
            .File(c => c.Url(Url.Content("~/Document.pdf")))
        .Toolbar(tb => tb.Items(item => item
     @addTagHelper *, Kendo.Mvc

    <script src=""></script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';

    <kendo-pdfviewer name="pdfviewer" height="1200">
        <pdfjs-processing file="@Url.Content("~/Dpocumet.pdf")" />
                <pdfviewer-toolbar-item name="myCustomTool" icon="fullscreen" togglable="true" type="button" toggle="toggleBtn">
    function toggleBtn(ev) {
        var viewerElement = kendo.widgetInstance($("#pdfviewer")).element[0];
        if (getFullscreenElement()) {
        } else {

    function getFullscreenElement() {
        return document.fullscreenElement
            || document.webkitfullscreenElement
            || document.mozfullscreenElement
            || document.msfullscreenElement

More ASP.NET Core PDFViewer Resources

See Also

In this article