Expanding PanelBar Items on the Client-Side

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

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

     $(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

1. Define the expandItems and iterateChildren functions:
2. expandItems goes through an array of dataItems and expands those that have children and aren't expanded.

3. 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.

    .Events(e=>e.DataBound("onDataBound"))

    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.

More ASP.NET Core PanelBar Resources

• ASP.NET Core PanelBar Documentation

• ASP.NET Core PanelBar Demos

• ASP.NET Core PanelBar Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Expanding PanelBar Items on the Client-Side
• Client-Side API Reference of the PanelBar for ASP.NET Core
• Server-Side API Reference of the PanelBar for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base