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

Add Thumbnail page navigation with RadPdfViewer


Product RadPdfViewer for ASP.NET AJAX


Q: How to add Thumbnail page navigation to the RadPdfViewer



  • Register the Pdf.js library on the page:
<head runat="server">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';
  • Declare an empty div that will serve as a container for the Thumbnail navigation.

  • Create the RadPdfViewer and set the PDF file that will be displayed

<div class="thumbnailsDiv"></div>
<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" RenderMode="Lightweight" Height="600px" Width="600px">
    <PdfjsProcessingSettings File="">

Create the Thumbnail navigation using JavaScript

  • Use the pdf.js to get the document

  • For each page generate a thumbnail as a canvas element wrapped in a separate div element

  • Wire the 'onclick' event to each Thumbnail and append it in the predefined wrapper.

  • In the Click event get a reference to the PdfViewer control object and activate the respective page in the PDF document using the Kendo widget.

function makeThumb(page) {
    // draw page to fit into 96x96 canvas
    var vp = page.getViewport(1);
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 200;
    var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
    return page.render({ canvasContext: canvas.getContext("2d"), viewport: page.getViewport(scale) }).promise.then(function () {
        return canvas;

pdfjsLib.getDocument("").promise.then(function (doc) {
    var pages = []; while (pages.length < doc.numPages) pages.push(pages.length + 1);
    return Promise.all( (num) {
        // create a div for each page and build a small canvas for it
        var div = document.createElement("div");
        div.className = "thumbnail";
        div.onclick = thumbnailClick;
        return doc.getPage(num).then(makeThumb)
            .then(function (canvas) {
                $telerik.$(div).append("<span style='margin-left: 55px;'>Page " + num + "</span>");

function thumbnailClick() {
    var pdfViewerObject = $find("<%=RadPdfViewer1.ClientID %>"); //the standard script control object
    var kendoPdfViewerObject = pdfViewerObject.get_kendoWidget(); //the Kendo widget
    kendoPdfViewerObject.activatePage($telerik.$(this).index() + 1);

Add custom CSS to achieve a smooth appearance:

div.thumbnailsDiv {
    height: 600px;
    width: 180px;
    overflow-y: scroll;
    float: left;

div.k-pdf-viewer {
    position: absolute;
    left: 200px;

div.thumbnail {
    cursor: pointer;

    div.thumbnail:hover {
        opacity: 0.5;

The approach above allows the users to scroll through the thumbnails of all pages in the navigation element and activate any desired page in the PdfViewer by clicking on the respective Thumbnail. Have in mind that scrolling in the PdfViewer is independent of scrolling in the thumbnail navigation and vice versa.

In this article