RadPanelBar provides a flexible client-side API. You can easily interact with the
panelbar in the browser using the panelbar client-side object.
- 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%>");
- 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");
- 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();
Client side changes are available on the server side after postback. You can use
the
ClientChanges property to access them:
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;
}
}