docs(common): Add links to new TelerikRootComponent article

Author: dimodi

Diff for: common-features/icons.md

@@ -281,7 +281,7 @@ Circles:
 
 It is possible to configure the icon type for the whole application:
 
-1. Locate the `<TelerikRootComponent>` tag in the Blazor app. Normally, it's in a layout file such as `MainLayout.razor` or `TelerikLayout.razor`.
+1. Locate the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}) tag in the Blazor app. Normally, it's in a layout file such as `MainLayout.razor` or `TelerikLayout.razor`.
 2. Set the `TelerikRootComponent` `IconType` parameter to an `IconType` enum value - `Svg` or `Font`.
 
 >tip The default icon type is `Font`. We plan to switch it to `Svg` in mid 2023 for better display.

Diff for: components/dialog/overview.md

@@ -91,7 +91,7 @@ The Dialog methods are accessible through its reference.
 
 | Method | Description |
 | --- | --- |
-| `Refresh` | Re-renders the Dialog. <br /> The Dialog is rendered as a child of the `TelerikRootComponent`, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the `Refresh` method comes in handy to ensure that the Dialog content is up-to-date. |
+| `Refresh` | Re-renders the Dialog. <br /> The Dialog is rendered as a child of the [`TelerikRootComponent`]({%slug rootcomponent-overview%}), instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the `Refresh` method comes in handy to ensure that the Dialog content is up-to-date. |
 
 >caption Get a reference to the Dialog and use its methods.
 

Diff for: components/dialog/predefined.md

@@ -19,7 +19,7 @@ To use these dialogs, receive a cascading parameter of type `Telerik.Blazor.Dial
 public DialogFactory Dialogs { get; set; }
 ````
 
-The predefined dialogs can only be used inside child Razor components of the `TelerikRootComponent`. This is easily achieved in standard Blazor apps where the `TelerikRootComponent` resides inside the layout file. When [using UI for Blazor in ASP.NET apps]({%slug telerik-blazor-in-asp-net-app%}), an additional child component is needed.
+The predefined dialogs can only be used inside child Razor components of the [`TelerikRootComponent`]({%slug rootcomponent-overview%}). This is easily achieved in standard Blazor apps where the `TelerikRootComponent` resides inside the layout file. When [using UI for Blazor in ASP.NET apps]({%slug telerik-blazor-in-asp-net-app%}), an additional child component is needed.
 
 There are three available ready-made dialogs:
 

Diff for: components/window/overview.md

@@ -140,7 +140,7 @@ The Window component can adapt to different screen sizes by making it responsive
 
 ### Important Notes
 
-The Telerik Window component renders as a child of the `TelerikRootComponent` at the root of the Blazor app. This is required, so it can show over the other page content, and have correct position.
+The Telerik Window component renders as a child of the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) at the root of the Blazor app. This is required, so it can show over the other page content, and have correct position.
 
 In Blazor, however, the render tree structure may be important. In some cases, the special Window placement may put you in one of the following situations:
 

Diff for: getting-started/hybrid-blazor.md

@@ -58,7 +58,7 @@ You can set the project to recognize all Telerik components without explicit `@u
 
 ### 4. Add the TelerikRootComponent
 
-Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:
+Add a [`TelerikRootComponent`]({%slug rootcomponent-overview%}) component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:
 
 * `Shared/MainLayout.razor` for MAUI apps
 * `Main.razor` for WPF and WinForms apps

Diff for: getting-started/server-blazor.md

@@ -80,7 +80,7 @@ In the `~/_Imports.razor` file, add the `@using` directives below. This configur
 
 ### 4.3. Add the TelerikRootComponent
 
-Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.
+Add a [`TelerikRootComponent`]({%slug rootcomponent-overview%}) component as a top-level component in the app and make sure it wraps all content.
 
 @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
 

Diff for: getting-started/what-you-need.md

@@ -144,7 +144,7 @@ You can set the project to recognize all Telerik components without explicit `@u
 
 #### Add the TelerikRootComponent
 
-To use popups (for example, dropdowns, menus, windows, grid filters, etc.), you must add the `TelerikRootComponent` component at the root level of the app and configure the app layout to adopt that.
+To use Telerik popups and global component settings, you must add the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) component at the root level of the app and configure the app layout to adopt that.
 
 The configuration varies depending on the application type:
 

Diff for: globalization/rtl-support.md

@@ -16,7 +16,7 @@ The default language input for most users on the web is left-to-right. However,
 
 ## Configuration
 
-Enabling the right-to-left support is configured on the root level so it targets all UI for Blazor components in the application. To enable the Right-to-Left direction of the components in your application, set the `EnableRtl` parameter of the `TelerikRootComponent`  to `true`.
+Enabling the right-to-left support is configured on the root level so it targets all UI for Blazor components in the application. To enable the Right-to-Left direction of the components in your application, set the `EnableRtl` parameter of the [`TelerikRootComponent`]({%slug rootcomponent-overview%})  to `true`.
 
 ````TelerikLayout.razor
 <TelerikRootComponent EnableRtl="true">

Diff for: knowledge-base/blazor-in-asp-net.md

@@ -27,7 +27,7 @@ How can I modernize my ASP.NET Core 3 web application by adding Blazor component
 You can use an ASP.NET Core 3 web application to render Blazor components by following the requirements, considerations, and steps below:
 
 1. Add Blazor to the project. This includes the client-side assets, the service, and the SignalR hub. In the sample project linked below, these are added to the layout so that all pages can use them. Make sure you don't add them twice on a certain page.
-1. [Add the Telerik components as usual]({%slug getting-started/what-you-need%}). Add the `TelerikRootComponent` around the contents of every Blazor component. Otherwise, it is not possible to render it in a shared location like in an actual Blazor app.
+1. [Add the Telerik components as usual]({%slug getting-started/what-you-need%}). Add the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) around the contents of every Blazor component. Otherwise, it is not possible to render it in a shared location like in an actual Blazor app.
 1. Use the Blazor components according to the current framework approach by using the `<component type="typeof(MyComponent)" render-mode="ServerPrerendered" param-SomeParameter="@ObjectToPass" />` approach. In previous versions, the recommended approach was by using Razor components like partial views through the `Html.RenderComponentAsync()` helper, where you has to pass their parameters as fields in an anonymous model object.
 1. If you wish to use [Alert, Confirm, or Prompt Dialogs]({%slug dialog-predefined %}), you need to do this in a nested Razor component of the `TelerikRootComponent`. Otherwise, if you try to define the `DialogFactory` `CascadingParameter` in the same Razor component that includes the `TelerikRootComponent`, then the cascading parameter will be `null`.
 1. If you are already using Kendo UI components in such a project, make sure to only use the [Telerik UI for Blazor Themes]({%slug general-information/themes%}). They match the [SASS-based themes from Kendo UI](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) and you must only have one theme referenced.

Diff for: knowledge-base/common-lazy-load-assemblies-wasm.md

@@ -57,7 +57,7 @@ All general guidance from the [Microsoft documentation](https://learn.microsoft.
     ````
 
 * The assembly requirements depend on component usage, and not on feature usage. For example, both icon assemblies are always required, as our components render icons internally and must be aware of both types of icons. The assemblies, which are related to Excel export, are always required when using a Grid. `Telerik.Recurrence.dll` is required only when using the Scheduler.
-* Move the `<TelerikRootComponent>` to a layout that is used only on pages that have the Telerik assemblies loaded.
+* Move the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}) to a layout that is used only on pages that have the Telerik assemblies loaded.
 * Lazy loading of assemblies does not support dynamic service injection. As a result, remove the Telerik service registration (`builder.Services.AddTelerikBlazor();`) from `Program.cs`. If you are using [localization for the Telerik Blazor components]({%slug globalization-localization%}), define the the localization service for the Telerik components with the `Localizer` parameter of the `<TelerikRootComponent>`. The key thing is to instantiate the localization service inline. It cannot be injected as a variable from the `@code { }` block, because that will throw runtime errors.
 
     ````

Diff for: knowledge-base/window-does-not-update-parent.md

@@ -27,7 +27,7 @@ If you have a form and a component that hosts a Telerik Window, you may want to
 ## Possible Cause
 The issue arises from the way UI re-rendering works. When the Window is in a separate component, UI updates only happen in that render tree, and not on the main component. 
 
-The Window renders at the TelerikRootComponent to ensure proper positioning, and does not render in the place of declaration. Thus, its parent is not what you see as a markup structure.
+The Window renders in the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) to ensure proper positioning, and does not render in the place of declaration. Thus, its parent is not what you see as a markup structure.
 
 ## Solution
 You need to invoke StateHasChanged() on the parent component in order to have the UI update. This is easily done by exposing an EventCallback from the component that hosts the Window, and handling that event in the parent component.

Diff for: troubleshooting/general-issues.md

@@ -32,7 +32,7 @@ Using a [Blazor Web App template](https://learn.microsoft.com/en-us/aspnet/core/
 
 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).
 
-This error will be thrown if the `TelerikRootComponent` is placed in a layout page that does not have interactive mode enabled. 
+This error will be thrown if the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) is placed in a layout page that does not have interactive mode enabled. 
 
 The `TelerikRootComponent` must be placed in a layout page (e.g. `MainLayout.razor`) with enabled interactive mode. Read more in [Web App - Add TelerikRootComponent]({%slug getting-started/web-app%}#43-add-the-telerikrootcomponent).
 
@@ -66,7 +66,7 @@ app {
 
 The position of popups (Window, various dropdowns such as DropDownList, ComboBox, DatePicker) can be wrong or offset.
 
-The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#configuring-the-project) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
+The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
 
 There are several common cases when such a mismatch occurs: