• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Custom Rendering

The PDFViewer exposes three events allowing you to customize the default rendering of its nested components:

Custom Tools

The following example showcases how to add a custom tool to the PDFViewer toolbar by keeping some of the built-in tools at the same time. For this purpose, collect all built-in tools available in the onRenderToolbar event arguments, and then return only the desired ones and a custom Mark as read button.

View Source
Change Theme:

Custom Content

The PDFViewer allows you to customize the loaded content by overwriting the result returned by the onRenderContent event. In this example, you will see how to add a red border to the element that wraps the loaded PDF document.

View Source
Change Theme:

Custom Loader

To change the default rendering of the loader that appears while the PDF document is loading, use the onRenderLoader event of the PDFViewer. Below you can see how to apply custom styling to the default loading element.

View Source
Change Theme: