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
inMainLayout.razor
or any other layout file that is currently in use. - A .NET 8 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 theTelerikRootComponent
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 .NET 8 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 UsingTelerikRootComponent
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.