The PanelBar widget displays hierarchical data as a multi-level expandable panel bar. PanelBar structure can be defined statically in HTML or configured dynamically with the PanelBar API. Content for PanelBar items can also be easily loaded with Ajax simply by specifying the content URL.

Getting Started

 <ul id="panelbar">
     <li>Item 1
         <ul>
             <li>Sub Item 1</li>
             <li>Sub Item 2</li>
         </ul>
     <li>
     <li>Item 2</li>
     <li>Item with Content
         <div>This is some PanelBar Item content</div>
     </li>
 </ul>

var panelBar = $("#panelBar").kendoPanelBar();

Items in a PanelBar can optionally define in-line HTML content. To add content, simply place the HTML inside of a div. Text content outside of the div will be used as the Item's PanelBar text.

Loading Content with Ajax

While any valid technique for loading Ajax content can be used, PanelBar provides built-in support for asynchronously loading content from URLs. These URLs should return HTML fragments that can be loaded in the PanelBar item content area.

When PanelBar loads content with Ajax, it is cached so that subsequent expand/collapse actions do not re-trigger the Ajax request.

 <!-- HTML structure -->
 <ul id="panelbar">
     <li>Item 1
         <ul>
             <li>Sub Item 1</li>
         </ul>
     </li>
     <li>Item 2</li>
     <li>
         Item with Dynamic Content
         <div></div>
     </li>
 </ul>

 //JavaScript initialization and configuration
 $(document).ready(function(){
     $("#panelbar").kendoPanelBar({
         contentUrls:[
           null,
           null,
           "html-content-snippet.html"
         ]
     });
 });

Customizing PanelBar Animations

By default, the PanelBar uses a slide animation to expand and reveal sub-items as the mouse hovers. Animations can be easily customized using configuration properties, changing the open and close animation style. A PanelBar can also be configured to only allow one panel to remain open at a time.

 $("#panelbar").kendoPanelBar({
     animation: {
         open : {effects: fadeIn}
     },
     expandMode: "single"
 });

Dynamically configuring PanelBar items

The PanelBar API provides several methods for dynamically adding or removing Items. To add items, provide the new item as a JSON object along with a reference item that will be used to determine the placement in the hierarchy.

A reference item is simply a target PanelBar Item HTML element that already exists in the PanelBar. Any valid jQuery selector can be used to obtain a reference to the target item. For examples, see the PanelBar API demos.

Removing an item only requires a reference to the target element that should be removed.

 var pb = $("#panelbar").kendoPanelBar().data("kendoPanelBar");
 pb.insertAfter(
     { text: "New PanelBar Item" },
     pb.element.children("li:last")
 );