Completed
Last Updated: 21 Jul 2021 15:31 by ADMIN
Created by: Kelly
Comments: 1
Category: Drawer
Type: Feature Request
4

It would be nice to have a handle feature within the rendered Drawer component that would expand and collapse the component. 

For example, see the following screenshots.

Draw Open

Draw Closed

Unplanned
Last Updated: 19 Jun 2021 16:55 by ADMIN
Created by: Christian
Comments: 5
Category: Drawer
Type: Feature Request
5

Hi,

 

could you add an Enabled Parameter (like in the Button Component) to the default databound values from a Drawer Item?

Of course I can handle this with a template, but actually I dont like to implement the whole item behaviour and the looks.

Ok, I a little bit lazy, but I think this would be a find addition to the feature set.

 

Best regards

Christian

Unplanned
Last Updated: 23 Nov 2020 14:05 by ADMIN
Created by: Christopher
Comments: 0
Category: Drawer
Type: Feature Request
1
I need this to allow navigation not only between Blazor components, but also to other internal MVC/Razor views/pages. I would prefer to not have to use a template to render explicit <a target="_self"> tags
Declined
Last Updated: 11 Nov 2020 14:22 by ADMIN

I'm using a custom drawer item to handle toggling the drawer open and close. Every time I click on my custom toggle item I call Drawer.ToggleAsync() (which I trigger on the SelectedItemChanged event handler). If the drawer is expanded to begin with, it is correctly collapsed to the mini view. However, if I click the toggle item again, the drawer expands and then immediately re-collapses itself. I put a breakpoint on the code that calls Drawer.ToggleAsync(), and it's only getting hit once for each click. This is very strange behavior. Please help me work out what's going on.

P.S If there is a better way to handle the click on my custom toggle drawer item (rather than using SelectedItemChanged), please let me know.

Code

@inherits LayoutComponentBase

<TelerikRootComponent>

    <div class="page">
        <div class="drawer-container">
            <TelerikDrawer 
                           @ref="@Drawer" 
                           Data="Data" 
                           MiniMode="true"
                           Expanded="true"
                           Mode="@DrawerMode.Push" 
                           SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))">
                <Content>
                    <div class="main">
                        <div class="content px-4">
                            @Body
                        </div>
                    </div>
                </Content>
            </TelerikDrawer>
        </div>
    </div>
</TelerikRootComponent>

@code {
    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Item1", Icon = IconName.Inbox },
            new DrawerItem { Text = "Item2", Icon = IconName.Information },
            new DrawerItem { Text = "Item3", Icon = IconName.MarkerPin },
            new DrawerItem { IsSeparator = true },
            new DrawerItem { Text = "Item4", Icon = IconName.Inbox },
            new DrawerItem { Text = "Item5", Icon = IconName.Inbox },
            new DrawerItem { Text = "Toggle", Icon = IconName.ArrowChevronLeft, IsToggle = true },
            };

    protected override Task OnInitializedAsync()
    {
        SelectedItem = Data.First();

        return base.OnInitializedAsync();
    }

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Icon { get; set; }
        public bool IsSeparator { get; set; }
        public bool IsToggle { get; set; }
    }

    private async Task SelectedItemChangedHandler(DrawerItem item)
    {
        SelectedItem = item;

        if (item.IsToggle)
        {
            await Drawer.ToggleAsync();

            if (Drawer.Expanded)
            {
                item.Icon = IconName.ArrowChevronRight;
            }
            else
            {
                item.Icon = IconName.ArrowChevronLeft;
            }
        }
    }
} 


Completed
Last Updated: 12 Oct 2020 06:53 by ADMIN
Created by: Roger Graham
Comments: 1
Category: Drawer
Type: Feature Request
0
The drawer facility is very useful, however in a real work scenario you need to be able to group and sort items to make it more usable.

For example, I could have projects with various levels of completeness. By grouping these by the project status would make it much easier to navigate.
Declined
Last Updated: 27 Aug 2020 09:17 by ADMIN

I hate to refer to this as a bug, as I'm sure there is something we are missing. Here's are the bullet points of the scenario:

  • We are using Telerik Drawer as our "NavMenu" component
  • We are using Azure AD for Authentication

In the OnLogInSucceeded section of our Authentication.razor, we are building the user specific menu from SQL tables, structuring it in a hierarchical DrawerItem list.

When I pass that back to the Data property of the TelerikDrawer, the display does not update. StateHasChanged doesn't have any impact. We have tried tying it to a "service" to listen for changes. We have even called an event that would manually make the update.


MAIN LAYOUT

@inherits LayoutComponentBase
@inject NavigationManager navigationManager
@inject PublicClient Http
@inject IMatToaster toast

@using G2_Field.Shared
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

@inject IAuthorizationService AuthorizationService
@inject Employee dbUSER

@attribute [Authorize]


    <TelerikRootComponent>
        <div>
            <NavMenu @ref="nm" items="@Data" />
        </div>

        <div class="app-main">
            <div class="app-bar">
                <div style="float:left">
                    <TelerikButton OnClick="@ToggleDrawer" Icon="@Telerik.Blazor.IconName.Menu" Class="k-flat" />
                </div>
                <div style="float:right">
                    <LoginDisplay />
                </div>
            </div>
            <div>
                @Body
            </div>
        </div>
    </TelerikRootComponent>
    <MatToastContainer />

    @code {
        public TelerikDrawer<DrawerItem> Drawer { get; set; }
        public DrawerItem SelectedItem { get; set; }
        public bool Expanded { get; set; } = true;
        NavMenu nm;

        public List<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL="" }
        };

        public async Task ToggleDrawer() 
        {
            await nm.ToggleDrawer();
        }

        public async Task OnSidebarChange(List<DrawerItem> di)
        {
            Data = di;
            Console.WriteLine(di.Last().Children.Last().Text);
            await nm.RefreshMenu(di);
        }...

AUTHENTICATION

@page "/authentication/{Action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared
@using System.Security.Claims
@inject Employee dbUSER
@inject PublicClient Http
@using System.Threading.Tasks

<RemoteAuthenticatorView Action="@Action" OnLogInSucceeded=@OnLogInSucceeded>
    <LoggingIn>
        You are about to be redirected to https://login.microsoftonline.com.
    </LoggingIn>
</RemoteAuthenticatorView> 

@code{
    [Parameter] public string Action { get; set; }
    AppCategories[] iMenu = new AppCategories[0];
    [CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; }

    [CascadingParameter] public Task<AuthenticationState> AuthenticationState { get; set; }
    [CascadingParameter] public List<DrawerItem> d { get; set; }
    [CascadingParameter(Name = "theMainLayout")] public MainLayout ml { get; set; }

    public async void OnLogInSucceeded()
    {
        var user = (await AuthenticationState).User;
        var un = (await AuthenticationState).User.Claims.ToList();
        var username = "";
        if (user.Identity.IsAuthenticated)
        {
            // Do some stuff
            Console.WriteLine("Log In Succeeded Event Fired");

            foreach (Claim u in un)
            {
                //Console.WriteLine(u.Type + " = " +  u.Value.ToString());
                if (u.Type == "preferred_username") { username = u.Value.ToString(); }
            }
            dbUSER = await Http.Client.GetJsonAsync<Employee>("/api/Index/GetCurrentEmployee/" + username);

            Console.WriteLine("EmpUserName=" + dbUSER.EmpUserName);

            var gUserName = dbUSER.EmpUserName;
            iMenu = await Http.Client.GetJsonAsync<AppCategories[]>("/api/Index/GetUserAppCategories/" + gUserName);

            d = new List<DrawerItem>();

            d.Add(new DrawerItem { Text = "HOME", Icon = "fa-home", Description = "Home", URL = "" });
            foreach (var app in iMenu)
            {
                List<DrawerItem> y = new List<DrawerItem>();
                foreach (var cat in app.ItemList)
                {
                    DrawerItem z = new DrawerItem
                    {
                        Text = cat.MenuItemTitle,
                        Icon = cat.MenuItemIcon,
                        Description = cat.MenuItemDescription,
                        URL = cat.MenuItemURL
                    };
                    y.Add(z);
                }

                DrawerItem x = new DrawerItem {
                    Text = app.MenuCategoryTitle,
                    Icon = Telerik.Blazor.IconName.Menu,
                    Description = app.MenuCategoryTitle,
                    Children = y
                };
                d.Add(x);
            }
            StateHasChanged();
            = new MainLayout();
            ml.OnSidebarChange(d);

        }
    }...



NAVMENU

@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared


<TelerikDrawer @ref="@Drawer" Data="@items" MiniMode="false" Mode="@DrawerMode.Overlay" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">
    <Template Context="AuthDrawerContext">
        <div class="k-drawer-items" role="menubar" aria-orientation="vertical">
            <ul>
                @foreach (var item in AuthDrawerContext)
                {
                    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>
</TelerikDrawer>


@code {
    [Parameter] public List<DrawerItem> items { get; set; }
    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool Expanded { get; set; } = true;
    public List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL = "" } };

    public async Task ToggleDrawer() => await Drawer.ToggleAsync();

    protected override void OnInitialized()
    {
        items = Data;
        SelectedItem = items.First();
        StateHasChanged();
    }

    public void OnHover()
    {

    }

    public async Task RefreshMenu(List<DrawerItem> di)
    {
        items = di;
    } 

       

 

Unplanned
Last Updated: 10 Jun 2020 06:23 by ADMIN
Created by: Augusto
Comments: 1
Category: Drawer
Type: Feature Request
9
I would like to have a boolean parameter that sets whether the Drawer will collapse when an item is clicked.
Completed
Last Updated: 14 May 2020 15:46 by ADMIN
Created by: Paul Shearing
Comments: 2
Category: Drawer
Type: Feature Request
1

Mini mode is very useful for conserving valuable screen estate but with the drawer in mini mode the user only sees a group of icons.

How can I add a mouse-over/hover descriptive text for each of the mini-mode icons so that users don't have to expand the menu to see the one that they want? I really don't want to resort to jQuery but this is an example where it may be the only solution.

The Drawer component is excellent BTW.

Kind regards,

Paul