Toolbar and Tools
Internally, the PDFViewer uses the Telerik UI for ASP.NET Core 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:
pagerzoomzoomInOuttoggleSelectionsearchopendownloadprintannotations
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.
@(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.
@(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.
@(Html.Kendo().PDFViewer()
.Name("pdfviewer")
)Overflow Behavior
The built-in toolbar provides properties for customizing its overflow behavior and appearance.
The following example demonstrates how to modify the default overflow settings of the toolbar through the Oveflow() configuration.
@(Html.Kendo().PDFViewer().Name("pdfviewer")
.PdfjsProcessing(pdf => pdf.File(Url.Content("~/shared/web/pdfViewer/sample.pdf")))
.Height(700)
.Toolbar(t => t
.Overflow(o => o
.Mode(ToolBarOverflowMode.Scroll)
.ScrollButtons(ScrollButtonsType.Auto)
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
.ScrollDistance(50)
)
)
)For more information on the available overflow options, refer to the Appearance documentation of the ToolBar component.
Custom Tools
The toolbar of the PDFViewer component supports custom tools.
The following example demonstrates how to add a custom tool to the toolbar.
@(Html.Kendo().PDFViewer()
.Name("pdfviewer")
.Toolbar(toolbar =>
toolbar.Items(items =>
{
items.Add().Text("Custom tool").Click("customToolClick").Type("button");
})
)
)