Blazor Sections Don't Show in Telerik Blazor Components
Environment
| Product | UI for Blazor |
| Version | 5.0 and above |
| .NET version | 8 and above |
Description
The ToolBarButton inside the SectionOutlet below doesn't render. How to use Blazor sections with the Telerik Blazor ToolBar and reusable SectionOutlet instances?
ToolBar with SectionOutlet
<TelerikToolBar>
<SectionOutlet SectionName="ToolbarOutlet"></SectionOutlet>
</TelerikToolBar>
SectionContent definition
<SectionContent SectionName="ToolbarOutlet">
<ToolBarButton>Save</ToolBarButton>
</SectionContent>
Cause
Some of the Telerik Blazor components rely on internal cascading values and parameters to send component instances and configuration settings from parent components (for example, the ToolBar) to child components (for example, the ToolBarButton).
Matching Section and Outlet components can reside anywhere in the app, including in different files. For the transfer of cascading values and parameters, the placement of the SectionContent is crucial. This means that a ToolBarButton inside a SectionContent is effectively outside the ToolBar and cannot receive cascading values from it.
As a result, Telerik Blazor components cannot support such configurations. The same problem will occur with a similar setup with Grid columns, Form items, TabStrip tabs, Wizard steps and any other component, which defines items as a declarative collection of child tags.
Solution
Use SectionOutlet inside Telerik Blazor components only inside officially documented templates.
Test example that shows working and non-working Section integration with Telerik Blazor components
@using Microsoft.AspNetCore.Components.Sections
<p>Default Configuration</p>
<TelerikToolBar>
<ToolBarButton>ToolBar Button</ToolBarButton>
</TelerikToolBar>
<p>Broken with Section and ToolBarButton</p>
<TelerikToolBar>
<SectionOutlet SectionName="ToolbarOutlet1"></SectionOutlet>
</TelerikToolBar>
<SectionContent SectionName="ToolbarOutlet1">
<ToolBarButton>ToolBar Button</ToolBarButton>
</SectionContent>
<p>Works with Section, ToolBarTemplateItem and TelerikButton</p>
<TelerikToolBar>
<ToolBarTemplateItem>
<SectionOutlet SectionName="ToolbarOutlet2"></SectionOutlet>
</ToolBarTemplateItem>
</TelerikToolBar>
<SectionContent SectionName="ToolbarOutlet2">
<TelerikButton>Telerik Button</TelerikButton>
</SectionContent>
Notes
We don't recommend and don't officially support custom markup or custom components inside our components, unless the custom content is placed inside a documented template (such as the ToolBar ToolBarTemplateItem) or containers that are intended for random content (such as the Window WindowContent). Currently it is possible to place invalid custom content inside Telerik components because Blazor RenderFragments don't support restrictions for child components and tags.