PdfViewer Toolbar
The PDF Viewer toolbar can render built-in and custom tools. This article describes the built-in tools and shows how to add custom tools or customize the toolbar.
Built-in Tools
By default, the PDF Viewer displays all its built-in tools in the order below. Use the tool tag if you need to define a tool explicitly in a custom toolbar configuration.
| Tool Name | Tool Tag | Description |
|---|---|---|
| Pager | PdfViewerToolBarPagerTool |
A pager to navigate the PDF document via automatic scrolling. Paging requires the Height parameter to be set, otherwise the component expands and doesn't have its own scrollbar. |
| Zoom | PdfViewerToolBarZoomTool |
Zoom in and zoom out buttons with an additional dropdown with common options (Fit to page, Fit to width, 100%, etc.) |
| Selection | PdfViewerToolBarSelectionTool |
Two toggle buttons that enable either text selection or panning. |
| Search | PdfViewerToolBarSearchTool |
A search button. It opens an additional search bar that contains a textbox and arrow buttons to navigate the search results. |
| Open | PdfViewerToolBarOpenTool |
An open button. It fires the OnOpen event. |
| Download | PdfViewerToolBarDownloadTool |
A download button. It fires the OnDownload event. |
PdfViewerToolBarPrintTool |
A print button. The component also provides a Print method. Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. |
By default, the toolbar also includes separators (<PdfViewerToolBarSeparator />) and spacers (<PdfViewerToolBarSpacer />). Separators render as a vertical line. Spacers consume the available empty space and push the rest of the tools next to one another.
Custom Tools
In addition to built-in tools, the PDF Viewer also supports custom tools. Use the <PdfViewerToolBarCustomTool> tag, which is a standard Blazor RenderFragment. See the example below.
Toolbar Configuration
Add a <PdfViewerToolBar> tag inside <TelerikPdfViewer> to configure a custom toolbar, for example:
- Arrange the PDF Viewer tools in a specific order;
- Remove some of the built-in tools;
- Add custom tools.
Customize the PDF Viewer toolbar
<TelerikPdfViewer Data="@PdfSource">
<PdfViewerToolBar>
<PdfViewerToolBarCustomTool>
<TelerikButton OnClick="@OnPdfCustomClick">Custom PDF Tool</TelerikButton>
</PdfViewerToolBarCustomTool>
<PdfViewerToolBarSeparator />
<PdfViewerToolBarOpenTool />
<PdfViewerToolBarDownloadTool />
<PdfViewerToolBarPrintTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarPagerTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarZoomTool />
<PdfViewerToolBarSelectionTool />
<PdfViewerToolBarSearchTool />
</PdfViewerToolBar>
</TelerikPdfViewer>
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfCustomClick()
{
Console.WriteLine("Custom PDF tool clicked");
}
}