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

Events

The Telerik UI PDFViewer for ASP.NET Core exposes events that allow you to control and customize the behavior of the UI component.

For a complete example on basic PDFViewer events, refer to the demo on using the events of the PDFViewer.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

@using Kendo.Mvc.UI

<h4>PDFViewer</h4>
<div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>

    <h4>PDFViewer</h4>
    <div>
        @(Html.Kendo().PDFViewer()
            .Name("pdfviewer")
            .Height(400)
            .Events(events => events
                .Render("onRender")
                .Open("onOpen")
                .Error("onError")
            )
        )
    </div>

    <script>
        function onRender(e) {
            console.log("page rendered: " + e.page.pageNumber);
        }

        function onOpen(e) {
            console.log("file open: " + e.file.name);
        }

        function onError(e) {
            console.log("error message: " + e.message);
        }
    </script>


    <style>
        html body #pdfviewer {
            width: 100% !important;
        }
    </style>
</div>

@addTagHelper *, Kendo.Mvc

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>

<div id="example">
    <kendo-pdfviewer name="pdfviewer"
        height="400"
        on-render="onRender"
        on-open="onOpen"
        on-error="onError">
    </kendo-pdfviewer>
</div>

<script>
    function onRender(e) {
        console.log("page rendered: " + e.page.pageNumber);
    }

    function onOpen(e) {
        console.log("file open: " + e.file.name);
    }

    function onError(e) {
        console.log("error message: " + e.message);
    }
</script>


<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>

Next Steps

See Also

In this article