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

Hierarchical Drawer on an Authorized Page

2 Answers 894 Views

Drawer

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

Jesse asked on 04 Jun 2020, 12:38 AM

I am currently working on a getting a new Blazor site set up. This site will be using Azure AD for authentication and restricts the entire site to only users logged in.

Right now I am working on getting the Hierarchical Drawer in to the site. I have run in to the following issue, The child content element 'Template' of component 'TelerikDrawer' uses the same parameter name ('context') as enclosing child content element 'Authorized' of component 'AuthorizeView'. Specify the parameter name like: '<Template Context="another_name"> to resolve the ambiguity.

<Authorized>

<div class="main">

<div class="top-row px-4">

<a class="logo" href="/">

<img src="img/Logo.png" />

</a>

<div class="user-info">

<LoginDisplay />

</div>

<TelerikDrawer @ref="@Drawer" Data="DrawerItems" MiniMode="@true" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">

<Template>

<div class="k-drawer-items" role="menubar" aria-orientation="vertical">

<ul>

@foreach (var item in context)

{

var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;

<li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">

<div class="k-level-@(item.Level)">

<TelerikIcon Icon="@item.Icon"></TelerikIcon>

<span class="k-item-text">@item.Text</span>

</div>

@if (item.Expanded && (item.Children?.Any() ?? false))

{

<span class="k-icon k-i-arrow-chevron-down" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>

}

else if (!item.Expanded && (item.Children?.Any() ?? false))

{

<span class="k-icon k-i-arrow-chevron-right" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>

}

</li>

}

</ul>

</div>

</Template>

<Content>

<div class="content px-4">

@Body

</div>

</Content>

</TelerikDrawer>

</div>

</Authorized>

I have tried the following:

<Authorized Context="AuthContext">

<div class="main">

<div class="top-row px-4">

<a class="logo" href="/">

<img src="img/Logo.png" />

</a>

<div class="user-info">

<LoginDisplay />

</div>

<TelerikDrawer @ref="@Drawer" Data="DrawerItems" MiniMode="@true" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">

<Template>

<div class="k-drawer-items" role="menubar" aria-orientation="vertical">

<ul>

@foreach (var item in context)

{

var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;

<li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">

<div class="k-level-@(item.Level)">

<TelerikIcon Icon="@item.Icon"></TelerikIcon>

<span class="k-item-text">@item.Text</span>

</div>

@if (item.Expanded && (item.Children?.Any() ?? false))

{

<span class="k-icon k-i-arrow-chevron-down" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>

}

else if (!item.Expanded && (item.Children?.Any() ?? false))

{

<span class="k-icon k-i-arrow-chevron-right" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>

}

</li>

}

</ul>

</div>

</Template>

<Content>

<div class="content px-4">

@Body

</div>

</Content>

</TelerikDrawer>

</div>

</Authorized>

But then get the following error:

NullReferenceException: Object reference not set to an instance of an object.

In debugging, I found that this error was at the following line of code:

@foreach (var item in context)

and the context is null.

If anyone has any insight in to have a Hierarchical Drawer on a Authorized page?

Thank you for taking a look,

Jesse

2 Answers, 1 is accepted

Accepted

answered on 04 Jun 2020, 08:48 AM

Hello Jesse,

The issue with nested RenderFragments (which is the root cause of the identical names of the context variables) is explained here: https://docs.telerik.com/blazor-ui/knowledge-base/nest-render-fragment.

Here's a sample of the solution put in the demo:

<TelerikDrawer @ref="@Drawer" Data="Data" MiniMode="false" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">
    <Template Context="myChangedContextName">
        <div class="k-drawer-items" role="menubar" aria-orientation="vertical">
            <ul>
                @foreach (var item in myChangedContextName)
                {
                    var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.