PanelBar / Client-side API

RadPanelBar provides a flexible client-side API. You can easily interact with the panelbar in the browser using the panelbar client-side object.

1. Getting the RadPanelBar client-side object. RadPanelBar creates a client-side object with the ClientID of the panelbar. You can obtain the reference using the following javascript code:

   var panelBar = $find("<%=RadPanelBar1.ClientID%>");		
   

2. Once you get the client-side object of RadPanelBar, you can use the findItemByText / findItemByValue methods to get the instance of a particular item. Example:

   var panelBar = $find("<%=RadPanelBar1.ClientID%>");
   var item = panelBar.findItemByText("text");
   

3. When you get the instance of a particular item, you can call the disable() / enable() / expand() / collapse() / etc. methods:

   function toggleItem()
   {
   	var panelBar = $find("<%=RadPanelBar1.ClientID%>");
   	
   	var item = panelBar.findItemByText("text");
   	
   	if (item)
   	{
   		if(!item.get_expanded())
   
                   {
                       item.expand();
   
                   }
                   else		
                   {
   		    item.collapse();			
   		} 
   	}
   	else
   	{
   		alert("Item with text '" + text + "' not found.");
   	}
   }

   To add a new item:

   //create a new item     
   var childItem = new Telerik.Web.UI.RadPanelItem();      
   childItem.set_text("New");
   //add the newly created item to the Items collection of an item's parent
   item.get_parent().get_items().add(childItem); 
   

   
   To remove an existing item:

   var parentItem = item.get_parent();
   parentItem.get_items().remove(item); 
   

   
   To disable an existing item:

   item.disable();

If you want to persist these changes after postback, the methods described below should be used:

• panelbar.trackChanges();  -indicates that client-side changes are going to be made and these changes are supposed to be persisted after postback.
• panelbar.commitChanges(); - submits the changes to the server.
  

var panelbar = $find("<%=RadPanelBar1.ClientID%>");
panelbar.trackChanges();
//add, remove, disable items
panelbar.commitChanges(); 

foreach (ClientOperation<RadPanelItem> operation in RadPanelBar1.ClientChanges)
{
	RadPanelItem item = operation.Item;

	switch (operation.Type)
	{
		case ClientOperationType.Insert:
			break;
		case ClientOperationType.Remove:
			break;
		case ClientOperationType.Update:
			UpdateClientOperation<RadPanelItem> update = operation as UpdateClientOperation<RadPanelItem>;
			break;
		case ClientOperationType.Clear:
			break;
	}	
}