• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Custom Rendering

The PDF Viewer 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 PDF Viewer 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.

Example
View Source
Change Theme:

Custom Content

The PDF Viewer 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.

Example
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 PDF Viewer. Below you can see how to apply custom styling to the default loading element.

Example
View Source
Change Theme: