Telerik Component Requires a TelerikRootComponent

Environment

Product

UI for Blazor TelerikRootComponent for Blazor

Description

This knowledge base article explains how to avoid or fix the exception about a missing TelerikRootComponent.

Error Message

Exception: A Telerik component on the requested view requires a TelerikRootComponent in MainLayout or a parent component.

Cause

The error occurs when a Telerik Blazor component cannot detect a TelerikRootComponent instance as a parent or ancestor in the Blazor component tree. Normally, each Telerik Blazor component obtains a reference to the TelerikRootComponent from a cascading value, which the TelerikRootComponent sets.

More specifically, the exception implies the following issues with the application setup:

• A Blazor application is missing a TelerikRootComponent in MainLayout.razor or any other layout file that is currently in use.
• A Blazor Web App has a TelerikRootComponent in a used layout file, but the app's Interactivity location is set to Per page/component. In such cases, the layout files use static render mode and the TelerikRootComponent is unable to pass cascading values down the component tree.

Solution

To fix and avoid the TelerikRootComponent exception:

• Add a TelerikRootComponent to one or more layout files, depending on the application's layout structure.
• When using the Blazor Web App project template, create the app with a Global interactivity location.
• If your scenario requires a Per page/component interactivity location, place the TelerikRootComponent in an interactive Razor component. Refer to Using TelerikRootComponent with Per Component Interactivity.

To avoid problems with popup positioning, wrap all the web page content in a TelerikRootComponent.

Do not nest multiple TelerikRootComponent instances.

See Also

• TelerikRootComponent Purpose and Overview
• Typical Usage of the TelerikRootComponent
• Using TelerikRootComponent with Per Component Interactivity