New to Telerik UI for ASP.NET Core? Start a free 30-day trial
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.
The following example demonstrates how to subscribe to events by a handler name.
builder.Services.AddKendo(x => x.RenderAsModule = true);
@using Kendo.Mvc.UI
<h4>PDFViewer</h4>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></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/4.3.136/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></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>