Toolbar and Tools

Internally, the PDFViewer uses the Telerik UI for ASP.NET MVC Toolbar and provides a set of default tools and corresponding commands in its toolbar.

You can also define custom tools in the toolbar that trigger custom logic.

Built-In Tools

You can control the number and type of the rendered tools by adding only the desired tools in the Items() configuration of the Toolbar. For the full list of configuration options, refer to the client-side API of the ToolBar items.

The toolbar of the PDFViewer supports the following built-in tools:

• pager
• zoom
• zoomInOut
• toggleSelection
• search
• open
• download
• print
• annotations

Running an Adblock extension in Chrome might treat the new browser tab for the print dialog as a potential ad and block it.

The zoom, zoomInOut, toggleSelection, search, and print tools are available only with PDFjs processing.

The following example demonstrates basic configuration options for the PDFViewer toolbar tools. You can also add spacer elements to group a specific set of tools.

Razor

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .Toolbar(toolbar =>
            toolbar.Items(items =>
            {
                items.Add().Name("pager");
                items.Add().Name("spacer");
                items.Add().Name("zoom");
                items.Add().Name("zoomInOut");
                items.Add().Name("toggleSelection");
                items.Add().Name("search");
                items.Add().Name("open");
                items.Add().Name("download");
                items.Add().Name("print");
            })
        )
    )

The open, download, and print built-in tools are displayed on the right-side of the toolbar (next to the search tool) by default. To update the default appearance of these tools and display them as options of a DropDownList, which is added as first item in the toolbar, enable the ContextMenu option of the Toolbar configuration.

Razor

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .Toolbar(toolbar => toolbar.ContextMenu(true))
    )

You can also use the add() and remove() client-side API methods to programmatically manage the rendered tools in the PDFViewer.

Razor

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")     
    )

JS

    <script>    
      var pdfviewer = $("#pdfviewer").getKendoPDFViewer(); // Get a reference to the PDFViewer.
      var printToolElement = $(".k-toolbar").find('button[data-command="PrintCommand"]'); // Select the 'print' tool button with jQuery.
      pdfviewer.toolbar.remove(printToolElement); // Remove the 'print' tool.
      pdfviewer.toolbar.add({ // Add a custom tool in the toolbar.
        type: "button",
        text: "Custom tool", 
        click: function() { 
            console.log("Cuatom tool button is clicked.");
        },
        togglable: true
      });
    </script>

Custom Tools

The toolbar of the PDFViewer component supports custom tools.

The following example demonstrates how to add a custom tool to the toolbar.

Razor

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .Toolbar(toolbar =>
            toolbar.Items(items =>
            {
                items.Add().Text("Custom tool").Click("customToolClick").Type("button");
            })  
        )
    )

JS

    <script>
        function customToolClick() {
            // Execute the desired custom logic when the custom tool is clicked.
        }
    </script>

See Also

• Basic Usage of the PDFViewer HtmlHelper for ASP.NET MVC (Demo)
• Client-Side API Reference of the ToolBar for ASP.NET MVC
• Server-Side API Reference of the PDFViewer for ASP.NET MVC