Styling the Web Report Designer

By default, the Web Report Designer loads a built-in Kendo UI theme so it renders correctly out of the box, with no additional configuration required. Starting with 2026 Q3 (20.2.26.812), you can instead supply your own theme through the useExternalTheme initialization option.

How Theming Works

When the Web Report Designer initializes, it loads the following stylesheets, in order:

1. Its built-in Kendo UI theme, which provides the colors, fonts, and other Kendo UI component styles ("skin").
2. Its own structural CSS, which controls the layout of the toolbox, panes, canvas, and other designer-specific elements.
3. An icon font used throughout the designer's UI.

Only the first stylesheet, the Kendo UI theme, can be swapped out. The structural CSS and the icon font are always loaded, regardless of the useExternalTheme setting, so re-skinning the designer through an external theme does not affect its overall layout.

Default Theme

By default (useExternalTheme not set, or set to false), the Web Report Designer automatically loads its built-in Kendo UI theme. No additional setup is required to get a fully styled designer.

Using an External Theme

To use your own Kendo UI theme instead of the built-in one:

1. Set the useExternalTheme option to true when initializing the Web Report Designer. This prevents the designer from loading its built-in theme.
2. Add a <link> reference to your own Kendo UI theme stylesheet on the host page, before the Web Report Designer initializes. The referenced theme can be:
   • A stock Kendo UI theme (for example, Default, Material, Bootstrap, Classic, Meridian, or Fluent).
   • A custom theme generated with ThemeBuilder (see Styling the Web Report Designer with ThemeBuilder).

html

<!-- Reference your own Kendo UI theme before the designer initializes -->
<link rel="stylesheet" href="path/to/your-theme.css" />

javascript

$("#reportDesigner").telerik_WebReportDesigner({
	serviceUrl: "api/reports",
	report: "SampleReport.trdp",
	useExternalTheme: true
	// ... other options
});

If useExternalTheme is set to true but no external theme stylesheet is referenced on the page, the Web Report Designer will render unstyled, as it will not load its built-in theme and no replacement theme will be available.

See Also

• Styling the Web Report Designer with ThemeBuilder
• Web Report Designer Initialization
• Web Report Designer Customization