Regression after upgrading from Telerik UI for Blazor v9 to v10 - Components require TelerikRootComponent even when it exists in MainLayout

[Alexandre]

After upgrading our project from Telerik UI for Blazor v9 to v10, some of our pages started throwing the following error:

Unhandled exception rendering component: A Telerik component in the requested view requires a TelerikRootComponent in MainLayout or a parent component.
Read more at: https://docs.telerik.com/blazor-ui/knowledge-base/common-component-requires-telerikrootcomponent

This is unexpected because:

* All pages in our application use the same MainLayout.

* The MainLayout.razor already contains a <TelerikRootComponent> at the top level.

* Nothing else was changed in the project except the Telerik package upgrade (no modifications in layouts or routing).

The error appears only on some pages, while other pages using the exact same layout work fine.

Questions / Issues:

1) Is this a breaking change or regression introduced in v10?

2) Are there any known scenarios where a Telerik component would fail to detect the existing TelerikRootComponent in the MainLayout?

3) Could there be an internal change in v10 causing certain components (e.g. Grid, Window, DropDowns, etc.) to require a different layout inheritance?

Environment:

* Blazor Server (.NET 9)

* Telerik UI for Blazor v10.x (upgraded from v9.x)

* MainLayout.razor includes <TelerikRootComponent> wrapping the layout body.

Expected behavior:

All components should work correctly as they did in v9, since the TelerikRootComponent is already present in the main layout.

Could you please advise if this is a bug or if there is an additional migration step required when upgrading from v9 to v10?

 

Thank you.

[Dimo]

Hi Alexandre,

1) Is this a breaking change or regression introduced in v10?

No, there are no changes related to the TelerikRootComponent between versions 9 and 10.

2) Are there any known scenarios where a Telerik component would fail to detect the existing TelerikRootComponent in the MainLayout?

The only two known scenarios are described in the Causes section of the KB article, which the exception message links. The relevant source code is:

    public partial class TelerikRootComponentFragment : ComponentBase, IDisposable
    {
        [CascadingParameter]
        protected internal TelerikRootComponent RootComponent { get; set; }

        protected override Task OnInitializedAsync()
        {
            if (RootComponent == null)
            {
                throw new Exception(CommonConstants.RootComponentExceptionMessage);
            }

            RootComponent.AddFragment(ChildContent, RenderInPlace);

            return base.OnInitializedAsync();
        }
}

3) Could there be an internal change in v10 causing certain components (e.g. Grid, Window, DropDowns, etc.) to require a different layout inheritance?

I don't see such a change and it is unlikely.

Can you send an isolated runnable app, which demonstrates the unexpected behavior?

Regards,
Dimo
Progress Telerik

[Alexandre]

Hello Dimo,

After several attempts, I finally solved it as follows:

1) Removed the <TelerikRootComponent> from MainLayout.razor.

2) Created a dedicated TelerikLayout.razor with:

<TelerikRootComponent>
    @Body
</TelerikRootComponent>

3) Applied it to the main layout by adding @layout TelerikLayout at the top of MainLayout.razor.

With this setup, all pages now work correctly without errors.

Best Regards,

Alexandre Lobo

[Dimo]

Thanks for the follow-up, Alexandre.

I am glad the issue is resolved, but frankly, I don't understand how is this possible. The new TelerikRootComponent placement in a parent layout should not affect its ability to pass itself as a CascadingValue. I suspect there is something else going on here. For example, is it possible that the Telerik components that threw the exception were placed outside the TelerikRootComponent's component tree?