Multiple @Body

3 posts, 0 answers
  1. Ed
    Ed avatar
    4 posts
    Member since:
    Oct 2020

    Posted 04 Dec 2020 Link to this post

    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. Ed
    Ed avatar
    4 posts
    Member since:
    Oct 2020

    Posted 05 Dec 2020 in reply to Ed Link to this post

    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,

    Ed

     
    <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>

  3. Nadezhda Tacheva
    Admin
    Nadezhda Tacheva avatar
    42 posts

    Posted 08 Dec 2020 Link to this post

    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/.

Back to Top