Edit this page

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);
}

See Also