New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Expand and Collapse all Items of RadPanelBar Control with a Button
Description
Create a button, that expands and collapses all the items from RadPanelBar
Solution
Using the client-side API of the RadPanelBar is getting the instance of a particular item, and call the expand()/ collapse() methods.
Here is sample code demonstrating the approach:
JavaScript
var shouldExpand = true;
function expandAllItems() {
var panel = $find("<%=RadPanelBar1.ClientID%>");
var items = panel.get_allItems();
for (var i = 0; i < items.length;i++) {
if (shouldExpand) {
items[i].expand();
}
else {
items[i].collapse();
}
}
//The button will execute the opposite action every time when is pressed.
shouldExpand = !shouldExpand;
}
ASPX
<telerik:RadButton RenderMode="Lightweight" ID="LoadButton" runat="server" Text="Expand" OnClientClicking="expandAllItems" AutoPostBack="false" />
<telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="200">
<Items>
<telerik:RadPanelItem Text="Mail">
<Items>
<telerik:RadPanelItem Text="Personal Folders" />
<telerik:RadPanelItem Text="Deleted Items" />
<telerik:RadPanelItem Text="Inbox" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Contacts">
<Items>
<telerik:RadPanelItem Text="My Contacts" />
<telerik:RadPanelItem Text="Address Cards" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Folders List">
<Items>
<telerik:RadPanelItem Text="My Client.Net" />
<telerik:RadPanelItem Text="My Profile" />
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>