Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 16 Jun 2025 11:45 by ADMIN
Victoria
Created on: 13 Jun 2025 17:49
Category: PanelBar
Type: Feature Request
1
Allow click of Panel Bar Item via a longer click to open root item even if it has child items
I have a panel bar being used as mobile navigation for URLs. It's a hierarchical setup so the child items will navigate, but not the root items which also have navigation landing pages. A longer click would be ideal, or a double click.

PanelBarItem panelBarItem = new()
{
  Id = menuItem.PageId,
  Text = menuItem.PageTitle,
  ParentId = menuItem.PageChildId,
  HasChildren = menuItem.HasChildren,
  Url = menuItem.PageURL,
  Icon = menuItem.Icon
};

<TelerikDrawer @ref="@Drawer"
               Data="@DrawerData"
               MiniMode="false"
               Mode="@DrawerMode.Overlay"
               Class="DrawerClass"
               @bind-Expanded="@IsDrawerOpen">
  <Template>
    <TelerikPanelBar Data="@PanelBarItems" ExpandMode="PanelBarExpandMode.Single" OnItemClick="@PanelBarClickHandler">
      <PanelBarBindings>
        <PanelBarBinding>
          <HeaderTemplate Context="PanelBarContext">
           @{
              var item = PanelBarContext as PanelBarItem;
              <b>@item?.Text</b>
            }
          </HeaderTemplate>
        </PanelBarBinding>
      </PanelBarBindings>
    </TelerikPanelBar>
  </Template>
</TelerikDrawer>

1 comment
ADMIN
Dimo
Posted on: 16 Jun 2025 11:45

Hi Victoria,

Using the same item for navigation and hierarchy expansion is not a best practice, it often leads to confusion, and we don't recommend it. Moreover, the suggested feature is not a common UX pattern that users may expect.

Thus, consider an extra child item instead, so that the parent is only for expansion.

If you really need to share functionality in a single item, then a PanelBar HeaderTemplate may help you use part of the parent item for navigation and part of it for expansion. The border in the following example is for demonstration purposes only.

@inject NavigationManager NavigationManager

<div style="width: 30%;">
    <TelerikPanelBar Data="@Items"
                     @bind-ExpandedItems="@ExpandedItems">
        <PanelBarBindings>
            <PanelBarBinding Level="0">
                <HeaderTemplate>
                    @{
                        var item = (PanelBarItem)context;

                        <span style="border:1px solid blue;flex: 1 1 100%;"
                              @onclick="@( () => OnParentItemClick(item.ProgrammaticUrl) )">
                            @item.Text
                        </span>
                    }
                </HeaderTemplate>
            </PanelBarBinding>
        </PanelBarBindings>
    </TelerikPanelBar>
</div>

<div style="width: 30%;">
    <TelerikPanelBar Data="@Items"
                     @bind-ExpandedItems="@ExpandedItems">
        <PanelBarBindings>
            <PanelBarBinding Level="0">
                <HeaderTemplate>
                    @{
                        var item = (PanelBarItem)context;

                        <span style="border:1px solid blue;"
                              @onclick="@( () => OnParentItemClick(item.ProgrammaticUrl) )">
                            @item.Text
                        </span>
                    }
                </HeaderTemplate>
            </PanelBarBinding>
        </PanelBarBindings>
    </TelerikPanelBar>
</div>

@code {
    private List<PanelBarItem> Items { get; set; } = new();

    private IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    public class PanelBarItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public ISvgIcon? Icon { get; set; }
        public string Url { get; set; } = string.Empty;
        public string ProgrammaticUrl { get; set; } = string.Empty;
    }

    private void OnParentItemClick(string url)
    {
        if (!string.IsNullOrEmpty(url))
        {
            NavigationManager.NavigateTo(url);
        }
    }

    private List<PanelBarItem> LoadFlatData()
    {
        List<PanelBarItem> items = new List<PanelBarItem>();

        items.Add(new PanelBarItem()
        {
            Id = 1,
            Text = "Section Name 1",
            ParentId = null,
            HasChildren = true,
            Icon = SvgIcon.Code,
            ProgrammaticUrl = "weather"
        });

        items.Add(new PanelBarItem()
        {
            Id = 2,
            Text = "Page 111",
            ParentId = 1,
            HasChildren = false,
            Icon = SvgIcon.Cs,
            Url = "/"
        });

        items.Add(new PanelBarItem()
        {
            Id = 3,
            Text = "Page 222",
            ParentId = 1,
            HasChildren = false,
            Icon = SvgIcon.Html5,
            Url = "counter"
        });

        items.Add(new PanelBarItem()
        {
            Id = 4,
            Text = "Page 333",
            ParentId = 1,
            HasChildren = false,
            Icon = SvgIcon.Css,
            Url = "weather"
        });

        return items;
    }

    protected override void OnInitialized()
    {
        Items = LoadFlatData();

        ExpandedItems = new List<object>() { Items[1] };

        base.OnInitialized();
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category