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

Toolbar Templates

The ToolBar represents the primary part of interaction between the user and RadPdfViewer. The control provides built-in capability to define custom client-side templates where you can place company logo, various buttons and any kind of HTML elements.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.PdfViewer.ToolbarTemplates.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>
    <style>
        .logo-image {
            background-image: url("progress.png");
            width: 36px;
            height: 36px;
        }
    </style>
</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';

        function pageLoad(app, args) {
            var pdfViewer = $find('<%= RadPdfViewer1.ClientID %>');
            pdfViewer.addToolBarItem({
                template: $("#template").html()
            });
            pdfViewer.addToolBarItem({
                type: "spacer"
            });
            pdfViewer.addToolBarItem({
                type: "spacer"
            });
            pdfViewer.addToolBarItem({
                type: "button",
                text: "Send an E-Mail",
                click: function (e) {
                    alert(e.target.text() + " is clicked");
                }
            });
        }
    </script>
    <div class="demo-container size-wide no-bg" runat="server">
        <script type="text/template" id="template">
            <a href="https://www.progress.com/telerik" data-overflow="auto" class="logo-image" target="_blank" />
        </script>
        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">
            <PdfjsProcessingSettings File="../Document.pdf"></PdfjsProcessingSettings>
            <ToolBarSettings Items="pager, spacer" />
        </telerik:RadPdfViewer>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance