PanelBar Overview

The Blazor PanelBar component displays data (flat or hierarchical) in an accordion type structure. In addition to built-in navigation capabilities, you can navigate through the items and their children, define templates, render text and icons/images, and respond to events.

Telerik UI for Blazor Ninja image

The PanelBar component is part of Telerik UI for Blazor, a professional grade UI library with 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:

Basics

To use a Telerik PanelBar for Blazor:

  1. Add the TelerikPanelBar tag
  2. Provide a collection of models to its Data parameter (read more in the Data Binding article)
  3. Match the fields in the models with the binding schema for the nodes

Basic PanelBar with flat data binding and built-in icons

@* Provide a flat collection of models to the PanelBar *@

<TelerikPanelBar Data="@Items">
</TelerikPanelBar>


@code {
    public List<PanelBarItem> Items { get; set; }

    public class PanelBarItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public string Url { get; set; }
        public List<PanelBarItem> Items { get; set; }
    }

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

        base.OnInitialized();
    }

    private List<PanelBarItem> GenerateData()
    {
        List<PanelBarItem> collection = new List<PanelBarItem>()
        {
            new PanelBarItem()
            {
                Text = "Item 1",
                Items = new List<PanelBarItem>()
                {
                    new PanelBarItem()
                    {
                        Text = "Item 1.1"
                    },
                    new PanelBarItem()
                    {
                        Text = "Item 1.2",
                        Disabled = true,
                        Items = new List<PanelBarItem>()
                        {
                            new PanelBarItem()
                            {
                                Text = "Item 1.2.1"
                            },
                            new PanelBarItem()
                            {
                                Text = "Item 1.2.2"
                            }
                        }
                    }
                }
            },
            new PanelBarItem()
            {
                Text = "Item 2",
                Items = new List<PanelBarItem>()
                {
                    new PanelBarItem()
                    {
                        Text = "Item 2.1",
                        Items = new List<PanelBarItem>()
                        {
                            new PanelBarItem()
                            {
                                Text = "Item 2.1.1"
                            }
                        }
                    },
                    new PanelBarItem()
                    {
                        Text = "Item 2.2",
                        Url = "https://google.com"
                    }
                }
            },
            new PanelBarItem()
            {
                Text = "Item 3"
            }
        };

        return collection;
    }
}

The result from the snippet above

Basic example of panelbar

Component namespace and reference

@* Get a reference to the PanelBar *@

<TelerikPanelBar @ref="@PanelBarReference">
</TelerikPanelBar>

@code {
    private Telerik.Blazor.Components.TelerikPanelBar PanelBarReference { get; set; }
}

Elements of a PanelBar Item

Each item in the PanelBar consists of a Header and Content. The image below illustrates the concept.

You can customize their rendering through the corresponding Header Template and Content Template.

The content represents the items in the hierarchy that do not have children. If the items have children and the ContentTemplate is defined, the template will not render. The header contains the Text of the correponding data item (model).

panelbar parts

See Also

In this article
Not finding the help you need? Improve this article