Multiple @Body in UI for Blazor

This is a migrated thread and some comments may be shown as answers.

Multiple @Body

2 Answers 21 Views

Notification

This is a migrated thread and some comments may be shown as answers.

Ed asked on 04 Dec 2020, 08:45 PM

I'm new to Blazor with Telerik and i'm having trouble creating a "top-level" notification layout.

I'm using a Drawer for a menu and would like a top-level notification component at the same level or above this Drawer component.

I'm using this as an example: https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app

But when I try to implementation something similar I end up with multiple @Body fragments in my MainLayout as seen below and in turn the content is duplicated.

Although the cascading Notification stuff works nice :)
I figure I'm missing something basic perhaps about encapsulating these into Blazor components? or something related to layouts?
Thanks,
Ed

<TelerikRootComponent>
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu"></TelerikButton>
<img src="https://www.qat.com/wp-content/uploads/2015/03/qat-global-logo-s.png" align="middle" />

<CultureChooser />

<TelerikNotification @ref="@Notification.Instance"
HorizontalPosition="@NotificationHorizontalPosition.Right"
VerticalPosition="@NotificationVerticalPosition.Top"
Class="big-notification">
</TelerikNotification>
<CascadingValue IsFixed="true" Value="@Notification">
<div class="content px-4">
@Body
</div>
</CascadingValue>

<TelerikDrawer @ref="@DrawerRef" Data="@NavigablePages" Expanded="@Expanded" MiniMode="true" Mode="@DrawerMode.Push"
SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
ExpandedChanged="((bool newValue) => ExpandedChangedHandler(newValue))">
<Content>
@Body
</Content>
</TelerikDrawer>

</TelerikRootComponent>

2 Answers, 1 is accepted

answered on 05 Dec 2020, 11:59 AM

After a little more reading and a good nights rest I figured it out.

I learned when it comes to the CascadingValue element, everything rendered within that element will have access to the value specified. So I wrapped the rest of my content under the CascadingValue element which allowed the Notification reference to be accessible from lower level components.

Thanks,

<TelerikNotification @ref="@Notification.Instance"
HorizontalPosition="@NotificationHorizontalPosition.Right"
VerticalPosition="@NotificationVerticalPosition.Top"
Class="big-notification">
</TelerikNotification>
<CascadingValue IsFixed="true" Value="@Notification">

<TelerikDrawer @ref="@DrawerRef" Data="@NavigablePages" Expanded="@Expanded" MiniMode="true" Mode="@DrawerMode.Push"
SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
ExpandedChanged="((bool newValue) => ExpandedChangedHandler(newValue))">
<Content>
@Body
</Content>
</TelerikDrawer>

</CascadingValue>

answered on 08 Dec 2020, 04:32 PM

Hello Ed,

I am glad that you managed to figure out the CascadingValue component's behavior since it is really useful to apply in such scenarios.

Indeed, if you want its specified value to be accessible from other components, they should be rendered inside the CascadingValue component.

As for the multiple @Body fragments you were experiencing, this is due to the @Body fragment being declared two times - once in the CascadingValue component and once more in the Drawer component. Only one instance of the @Body fragment has to be implemented as per your second example.

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.