New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Expanding PanelBar Items on the Client-Side

Updated on Oct 24, 2025

Environment

Product	Progress Telerik UI for ASP.NET Core PanelBar
Progress Telerik UI for ASP.NET Core version	Created with the 2022.3.913 version

Description

How can I iterate and expand the items of the Telerik UI for ASP.NET Core PanelBar?

Solution

To expand the PanelBar items, you can use either of the following approaches:

Use jQuery selectors to access the Html elements created by the PanelBar—this approach is useful when binding local data and statically defined items.
Iterate the items and their children recursively and expand them—this approach is useful when binding to remote data and the expanded state of the item is determined by its data.

Expanding Static Items

Wait until the document has loaded completely.
Get the client-side instance of the PanelBar.
Select the elements with the .k-item class.
Iterate through the elements and pass each item to the expand method.

JavaScript

     $(document).ready(function(){
        var panelbar = $("#panelbar").data("kendoPanelBar");
        var items =$("ul#panelbar>.k-item");
        items.each((index, item)=>{
            panelbar.expand(item)
        })
    })

For a runnable example, refer to the Telerik REPL example on expanding static items

Recursive Expanding of Items Populated through Remote Data-Binding

Define the expandItems and iterateChildren functions:

expandItems goes through an array of dataItems and expands those that have children and aren't expanded.
iterateChildren goes through all the items that have children and applies the expandItems function.

When these functions are executed in the DataBound event handler of the PanelBar, a recursion occurs. It terminates when all the items of the component are iterated and expanded.
(Optional) Add another condition that determines whether the item is expanded based on its previous state or its data values.

Razor
    .Events(e=>e.DataBound("onDataBound"))
JavaScript
    function onDataBound(e){
        var data = e.sender.dataSource.data();
        expandItems(data,e.sender)
        iterateChildren(data,e.sender)
    }

    function iterateChildren(data, panelbar){
        data.forEach(dataItem=>{
            if(dataItem.hasChildren && dataItem.children._data && dataItem.children._data.length>0){
                expandItems(dataItem.children._data,panelbar);
            }
        })
    }
    
    function expandItems(data,panelbar){
        data.forEach(dataItem=>{
            if(dataItem.hasChildren && dataItem.expanded !=true){
                panelbar.expand($("li[data-uid='"+dataItem.uid+"']"))
            }
        })
    }

For a runnable example, refer to the Telerik REPL example of the recursive expansion approach.