RadPanelBar Object
The following table lists the most important methods of the RadPanelBar client-side object:
| Name | Parameters | Return Type | Description |
|---|---|---|---|
| trackChanges | none | none | Begins tracking changes to the panel items. Only changes to the items that occur between a call to trackChanges and commitChanges persist after a postback. See Example 1. |
| commitChanges | none | none | Ends tracking changes to the panel items. Only changes to the items that occur between a call to trackChanges and commitChanges persist after a postback. Client side changes are available on the server side after postback. You can use the ClientChanges property to access them. See Example 1. |
| disable | none | none | Disables all items in the panel. Clicking on any item has no effect, child items cannot be opened. See Example 2. |
| enable | none | none | Enables all items in the panel. |
| get_enabled | none | boolean | True if the panel is enabled. To enable a panel, use the enable() method. |
| findItemByValue | (string value) | RadPanelItem | Returns the first RadPanelBarItem object whose Value property is equal to the passed parameter. |
| findItemByText | (string text) | RadPanelItem | Returns the first RadPanelBarItem object whose Text property is equal to the passed parameter. |
| findItemByUrl | (string URL) | RadPanelItem | Returns the first RadPanelBarItem object whose NavigateUrl property is equal to the passed parameter. |
| findItemByAbsoluteUrl | (string URL) | RadPanelItem | Returns the first RadPanelBarItem object whose NavigateUrl property is equal to the passed parameter. Note that the parameter should end with '/' like:var item = sender.findItemByAbsoluteUrl('http://www.test.com/'); |
| findItemByAttribute | (string attributeName, string value) | RadPanelItem | Returns the first RadPanelBarItem object with a custom attribute of the specified name that has the specified value. |
| get_items | none | RadPanelItemCollection | Returns the collection of root level items. See Example 3. |
| get_allItems | none | Array | Gets a linear collection of all items. This includes all root and child items in the panel. See Example 4. |
| get_focusedItem | none | RadPanelItem | Returns the focused root level item. Null if no root level item has focus. |
| get_expandedItem | none | RadPanelItem | Returns the last root level item that was expanded. Null if no root level items are expanded. |
| get_expandedItems | none | Array | Returns an array of the RadPanelBarItem objects for every expanded item in the panel bar (including expanded child items). |
| get_selectedItem | none | RadPanelItem | Returns the selected item if it exists. (It does not have to be a root level item). Null if the panel does not have a selected item. |
| get_selectedItems | none | Array | Returns an array containing the selected items in the panel. Because the panel bar does not allow more than one item to be selected, the array always has 0 or 1 elements. |
| get_attributes | none | Collection | Returns the collection of custom attributes for the panel. |
| get_element | none | HTML Element | Gets the DOM element for the panel. See Example 5. |
| get_childListElement | none | HTML Element | Gets the DOM element for the list of items in the panel. |
| enableEvents | none | none | Enables the panel bar's client-side event emitting. Events are enabled by default. |
| disableEvents | none | none | Disables the panel bar's client-side event emitting. |
add_<EventName> |
(mixed eventHandler) | none | Attaches an eventHandler to the event with the name <EventName>. Note that client-side event names differ from their server-side counterparts. For more information, see Client-Side Events. See Example 6. |
remove_<EventName> |
(mixed eventHandler) | Boolean | Detaches an eventHandler from the event with the name <EventName>.Returns "True" if the eventHandler is found and detached, false otherwise.Note that client-side event names differ from their server-side counterparts. For more information, see Client-Side Events. See Example 7. |
Example 1: Add a new item and persist it after a postback.
function AddNewItem() {
var panel = $find("<%= RadPanelBar1.ClientID %>");
var panelItem = new Telerik.Web.UI.RadPanelItem();
panelItem.set_text("New Item");
panel.trackChanges();
panel.get_items().add(panelItem);
panel.commitChanges();
}
Example 2: Disable the RadPanelBar.
function Disablepanel() {
var panel = $find("<%= RadPanelBar1.ClientID %>");
panel.disable();
}
Example 3: Get all root items and display their text value.
function showRootItems() {
var panel = $find("<%= RadPanelBar1.ClientID %>");
var items = panel.get_items();
for (var i = 0; i < items.get_count(); i++) {
alert(items.getItem(i).get_text());
}
}
Example 4: Get all items and display their text value.
function showAllItems() {
var panel = $find("<%=RadPanelBar1.ClientID %>");
for (var i = 0; i < panel.get_allItems().length; i++) {
alert(panel.get_allItems()[i].get_text());
}
}
Example 5: Hide/show the RadPanelBar.
// hide the panel
// note this change does not persist after a postback
function hidepanel() {
var panel = $find("<%= RadPanelBar1.ClientID %>");
panel.get_element().style.display = "none";
}
// show the panel
function showpanel() {
var panel = $find("<%= RadPanelBar1.ClientID %>");
panel.get_element().style.display = "";
}
Example 6: Add a handler to the OnClientItemBlur event.
function OnClientItemBlurHandler() {
alert("goodbye");
}
function AttachBlurHandler() {
var panel = $find("<%=RadPanelBar1.ClientID %>");
panel.add_itemBlur(OnClientItemBlurHandler);
}
Example 7: Remove the OnClientItemBlur event's handler.
function OnClientItemBlurHandler() {
alert("goodbye");
}
function DetachBlurHandler() {
var panel = $find("<%=RadPanelBar1.ClientID %>");
panel.remove_itemBlur(OnClientItemBlurHandler);
}