Skip to content

Commit 8d4c5bd

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
docs(common): Documentation for NET 8 compatibility (#1670)
* docs(common): Documentation for NET 8 compatibility * chore(common): update net 8 compatibility info and resources * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md Co-authored-by: Dimo Dimov <[email protected]> * Update troubleshooting/general-issues.md * Update system-requirements.md * Update system-requirements.md --------- Co-authored-by: Dimo Dimov <[email protected]>
1 parent 97a2443 commit 8d4c5bd

File tree

2 files changed

+113
-1
lines changed

2 files changed

+113
-1
lines changed

‎system-requirements.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ A **compatible .NET version** is one that is *no longer* (or *not yet*) official
4949
5050
| .NET version | First UI for Blazor Version | Last UI for Blazor Version |
5151
| --- | --- | --- |
52-
| .NET 8 Preview | 4.1.0 | {{site.uiForBlazorLatestVersion}} (current official) |
52+
| .NET 8 RC 2 ([see specifics]({%slug troubleshooting-general-issues%}#telerikrootcomponent-is-missing-in-net-80)) | 4.6.0 | {{site.uiForBlazorLatestVersion}} (current official) |
5353
| .NET 5 | 2.19.0 | {{site.uiForBlazorLatestVersion}} (current official) |
5454
| .NET Core 3.1 | 2.5.0 | {{site.uiForBlazorLatestVersion}} (current official) |
5555

‎troubleshooting/general-issues.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ position: 1
1212

1313
This page provides solutions for common issues you may encounter while working with Telerik UI for Blazor components.
1414

15+
* [TelerikRootComponent is missing in .NET 8.0](#telerikrootcomponent-is-missing-in-net-80)
1516
* [Popups Do Not Work](#popups-do-not-work)
1617
* [Wrong Popup Position](#wrong-popup-position)
1718
* [Unable to find package Telerik.Documents.SpreadsheetStreaming](#unable-to-find-package-telerikdocumentsspreadsheetstreaming)
@@ -23,6 +24,117 @@ This page provides solutions for common issues you may encounter while working w
2324
* [NuGet Feed Troubleshooting]({%slug troubleshooting-nuget%})
2425
* [Upload Troubleshooting]({%slug upload-troubleshooting%})
2526

27+
## TelerikRootComponent is missing in .NET 8.0
28+
29+
The latest UI for Blazor (4.6.0) provides [compatibility with .NET 8.0 RC 2]({%slug system-requirements%}#compatible-net-versions). This framework version [is not yet supported]({%slug system-requirements%}#supported-net-versions) and we do not recommend using our components with it until officially supported.
30+
31+
If you need to start testing with .NET 8.0 RC 2 at this stage, be aware of the following error you may hit when using the new [Blazor Web App template](https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-rc-1/#blazor-web-app-template-updates)
32+
33+
>warning Error: System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app.
34+
35+
The root cause for this is a difference in the required configuration when using [interactive render modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#enable-support-for-interactive-render-modes).
36+
37+
.NET 8.0 introduces [new render modes for the Blazor components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0). The `TelerikRootComponent` must be placed in a layout page (e.g. `MainLayout.razor`) with enabled interactive mode. At the time of writing, the default render mode is `Static` and not interactive, so you need to make this change explicitly in your app.
38+
39+
Here are two possible options to proceed:
40+
41+
* Set the render mode for the whole app as suggested in the [Blazor documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#set-the-render-mode-for-the-entire-app). This will spare the need to set the render mode in every page and component.
42+
43+
* Set interactive render mode for specific pages and components. This is useful if you want to have different render modes in the app. In this case, make sure that the `TelerikRootComponent` is placed in a component hierarchy that has interactive render mode. See the example below:
44+
45+
<div class="skip-repl"></div>
46+
47+
````MainLayout.razor
48+
@inherits LayoutComponentBase
49+
50+
@implements IDisposable
51+
52+
@Body
53+
54+
@code {
55+
protected override Task OnInitializedAsync()
56+
{
57+
return base.OnInitializedAsync();
58+
}
59+
60+
public void Dispose()
61+
{
62+
}
63+
}
64+
````
65+
````CustomLayout.razor
66+
@attribute [RenderModeServer]
67+
68+
<TelerikRootComponent>
69+
70+
<div class="page">
71+
<div class="sidebar">
72+
<NavMenu />
73+
</div>
74+
75+
<main>
76+
<div class="top-row px-4">
77+
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
78+
</div>
79+
80+
<article class="content px-4">
81+
@ChildContent
82+
</article>
83+
</main>
84+
</div>
85+
86+
<div id="blazor-error-ui">
87+
An unhandled error has occurred.
88+
<a href="" class="reload">Reload</a>
89+
<a class="dismiss">🗙</a>
90+
</div>
91+
92+
</TelerikRootComponent>
93+
````
94+
````NavMenu.razor
95+
<div class="top-row ps-3 navbar navbar-dark">
96+
<div class="container-fluid">
97+
<a class="navbar-brand" href="">MyBlazorWeb</a>
98+
</div>
99+
</div>
100+
101+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
102+
103+
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
104+
<nav class="flex-column">
105+
<div class="nav-item px-3">
106+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
107+
<span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
108+
</NavLink>
109+
</div>
110+
111+
<div class="nav-item px-3">
112+
<NavLink class="nav-link" href="counter">
113+
<span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
114+
</NavLink>
115+
</div>
116+
117+
<div class="nav-item px-3">
118+
<NavLink class="nav-link" href="weather">
119+
<span class="bi bi-list-nested" aria-hidden="true"></span> Weather
120+
</NavLink>
121+
</div>
122+
</nav>
123+
</div>
124+
````
125+
````Home.razor
126+
@page "/"
127+
128+
@attribute [RenderModeServer]
129+
130+
<CustomLayout>
131+
132+
@* Telerik UI for Blazor components here *@
133+
134+
</CustomLayout>
135+
````
136+
137+
>tip Consider and choose any configuration that best suits your application needs. The important part is to ensure that the layout component where the `TelerikRootComponent` is defined has interactive mode.
26138
27139
## Popups Do Not Work
28140

0 commit comments

Comments
 (0)