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
- Wait until the document has loaded completely.
- Get the client-side instance of the PanelBar.
- Select the elements with the
.k-itemclass. - 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
- Define the
expandItemsanditerateChildrenfunctions: -
expandItemsgoes through an array ofdataItemsand expands those that have children and aren't expanded. -
iterateChildrengoes through all the items that have children and applies theexpandItemsfunction.When these functions are executed in the
DataBoundevent 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.