New to Telerik UI for Blazor? Download free 30-day trial

Expanded Items

You can expand a single or multiple items in the Telerik PanelBar.

In this article:

ExpandMode

You can use the ExpandMode to allow the user to expand one or more items at a time. To control that set the ExpandMode parameter of the <TelerikPanelBar> to a member of the PanelBarExpandMode enum:

  • Single - Expands only one item at a time. If you expand a new item the previously expanded item will be collapsed.

  • Multiple - the default value - Lets you expand more than one item simultaneously. To collapse an expanded item, click it again.

Change the Expand mode of the PanelBar

@* Set the Expanded mode of the PanelBar to single *@

<div style="width: 30%;">
    <TelerikPanelBar Data="@Items"
                     ExpandMode="@PanelBarExpandMode.Single">
    </TelerikPanelBar>
</div>

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

    public class PanelBarItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
    }

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

        items.Add(new PanelBarItem()
        {
            Id = 1,
            Text = "Parent 1",
            ParentId = null,
            HasChildren = true
        });

        items.Add(new PanelBarItem()
        {
            Id = 2,
            Text = "Parent 2",
            ParentId = null,
            HasChildren = true,
        });

        items.Add(new PanelBarItem()
        {
            Id = 3,
            Text = "Child 1 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 4,
            Text = "Child 2 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 5,
            Text = "Child 1 of Parent 1",
            ParentId = 1,
            HasChildren = false
        });

        return items;
    }

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

        base.OnInitialized();
    }
}

ExpandedItems

The PanelBar lets the user expand an item. You can also pre-expand a desired item.

To use the item expansion, use the ExpandedItems parameter. It allows two-way binding (@bind-ExpandedItems) and one-way binding + ExpandedItemsChanged event.

The ExpandedItems collection is of type IEnumerable<object>.

If the ExpandMode is set to Single the ExpandedItems collection will contain one item, otherwise it will have a collection of the expanded items.

@* Get the items the user has expanded. *@

<div style="width: 30%;">
    <TelerikPanelBar Data="@Items"
                     @bind-ExpandedItems="@ExpandedItems">
    </TelerikPanelBar>
</div>

@if (ExpandedItems.Any())
{
    <ul>
        @foreach (var item in ExpandedItems)
        {
            PanelBarItem currentItem = item as PanelBarItem;

            <li>
                @currentItem.Text
            </li>
        }
    </ul>
}

@code {
    public List<PanelBarItem> Items { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    public class PanelBarItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
    }

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

        items.Add(new PanelBarItem()
        {
            Id = 1,
            Text = "Parent 1",
            ParentId = null,
            HasChildren = true
        });

        items.Add(new PanelBarItem()
        {
            Id = 2,
            Text = "Parent 2",
            ParentId = null,
            HasChildren = true,
        });

        items.Add(new PanelBarItem()
        {
            Id = 3,
            Text = "Child 1 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 4,
            Text = "Child 2 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 5,
            Text = "Child 1 of Parent 1",
            ParentId = 1,
            HasChildren = false
        });

        return items;
    }

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

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

        base.OnInitialized();
    }
}

Programmatically Expand and Collapse Items

Programmatically expand and collapse items on button click

@* Use the buttons to programmatically expand and collapse items in the PanelBar *@ 

<TelerikButton OnClick="@ExpandItems">Expand First and Second Item</TelerikButton>
<TelerikButton OnClick="@CollapseItems">Collapse the Expanded Items</TelerikButton>

<div style="width: 30%;">
    <TelerikPanelBar Data="@Items"
                     @bind-ExpandedItems="@ExpandedItems">
    </TelerikPanelBar>
</div>

@code {
    public List<PanelBarItem> Items { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    private void ExpandItems()
    {
        ExpandedItems = new List<object>() { Items[0], Items[1] };
    }

    private void CollapseItems()
    {
        ExpandedItems = new List<object>();
    }

    public class PanelBarItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
    }

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

        items.Add(new PanelBarItem()
        {
            Id = 1,
            Text = "Parent 1",
            ParentId = null,
            HasChildren = true
        });

        items.Add(new PanelBarItem()
        {
            Id = 2,
            Text = "Parent 2",
            ParentId = null,
            HasChildren = true,
        });

        items.Add(new PanelBarItem()
        {
            Id = 3,
            Text = "Child 1 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 4,
            Text = "Child 2 of Parent 2",
            ParentId = 2,
            HasChildren = false
        });

        items.Add(new PanelBarItem()
        {
            Id = 5,
            Text = "Child 1 of Parent 1",
            ParentId = 1,
            HasChildren = false
        });

        return items;
    }

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


        base.OnInitialized();
    }
}

See Also

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