New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Expanding PanelBar Items on the Client-Side

Environment

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

Description

How can I iterate and expand the items of the Telerik UI for ASP.NET MVC 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 MVC PanelBar Resources

See Also

In this article