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

Client-side API

  • Demo Configurator
Load File
Change Page

RadPdfViewer for ASP.NET AJAX is based on the Kendo UI PdfViewer Widget. Thus, it exposes the Client-side API and methods offered by the widget and mainly provides a wrapper and API for working with the PdfViewer on the server.
You can get Client-side Object Reference to the PdfViewer control in order to use its API like this:

var RadPdfViewerObject = $find("<%=RadPdfViewer1.ClientID %>");

The most commonly used RadPdfViewer client-side methods are:

  • execute—Executes a command of the PDFViewer.
  • fromFile—Displays the file which path is passed as a parameter in the PDFViewer.
  • get_activePage—Returns the selected page number in the viewer.
  • get_pages—Returns a list of the pages in the loaded document.
  • set_activePage—Loads and scrolls to the page by number.

You can find the full client-side API of the control in the RadPdfViewer Client-side API documentation article.


Get Client-side Object Reference to the Kendo PdfViewer widget in order to use its API

There are two ways to get a reference to the Kendo PdfViewer widget in order to use its API:

  • Use the get_kendoWidget method the RadPdfViewer client-side object exposes. You can get the RadPdfViewer object through the $find() MS AJAX method:

    var RadPdfViewerObject  = $find("<%=RadPdfViewer1.ClientID %>"); //the standard script control object
    var kendoPdfViewerObject = RadPdfViewerObject.get_kendoWidget(); //the Kendo widget

  • Use the standard Kendo approach for getting the widget through the data-attributes of the DOM element:

    var kendoPdfViewerObject = $telerik.$("#<%=RadPdfViewer1.ClientID %>").data("kendoPDFViewer"); //the jQuery selector must get the RadPdfViewer1 select element

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.PdfViewer.ClientSideAPI.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

        var pdfViewer;

        function onLoad(sender, args) {
            pdfViewer = sender;
        }

        function loadFile(sender, args) {
            pdfViewer.fromFile("NewDocument.pdf");
        }
        function changePage(sender, args) {
            var pageNum = args.get_newValue();
            pdfViewer.activatePage(pageNum);
        }
    </script>

    <div class="demo-container size-wide no-bg" runat="server">
        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer2" Height="550px" Width="100%" Scale="0.9">
            <ClientEvents OnLoad="onLoad" />
            <PdfjsProcessingSettings File="../Document.pdf">
            </PdfjsProcessingSettings>
        </telerik:RadPdfViewer>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="rpvConfigurationPanel">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium" Title="Load File">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button Width="100" runat="server" ID="btnLoadFile" Text="Load" AutoPostBack="false" OnClientClicked="loadFile" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium" Title="Change Page">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="ChangePageTxb" runat="server" AutoPostBack="false" ShowSpinButtons="true" Value="1" Width="200px" NumberFormat-DecimalDigits="0" MinValue="1" MaxValue="3">
                                <ClientEvents OnValueChanged="changePage" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance