New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Programming Overview

RadPanelBar provides a flexible client-side API. You can easily interact with the panel bar in the browser using the panel bar client-side object. In addition to a variety of client-side events, the client-side object model lets you achieve complicated tasks while avoiding unnecessary post-backs.

Getting the RadPanelBar client-side object

RadPanelBar creates a client-side object with the ClientID of the panel bar. You can obtain the reference using the following JavaScript code:


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

Getting the instance of a particular RadPanelItem

Once you have the client-side object of RadPanelBar, you can use the findItemByText() method to get the instance of a particular item:


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

You can also use the findItemByValue() method to get a specific item by its value.

Cancelling an action

Several client side events occur immediately before the panel bar performs some action. Most of these events all have names that end in "-ing". You can use these events to cancel the panel bar action by using the cancel property of the eventArgs passed to the handler:


function OnClientItemClicking(sender, eventArgs) {
    eventArgs.set_cancel(true); 
}

Calling a client-side method

When you get the instance of the RadPanelBar object, you can call client-side methods to perform certain tasks. Consider the following examples:

  • expand()

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

  • collapse()

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

  • disable()

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

  • enable()

function enableAll() {
    var panelBar = $find("<%= RadPanelBar1.ClientID %>");
    for (var i = 0; i < panelBar.get_allItems().length; i++) {
        panelBar.get_allItems()[i].enable();
    }  
}

Preserving Changes

By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods:


function addNewItem() {
    var panelBar = $find("<%= RadPanelBar1.ClientID %>");
    var panelItem = new Telerik.Web.UI.RadPanelItem();
    panelItem.set_text("New Item");
    panelBar.trackChanges();
    panelBar.get_items().add(panelItem);
    panelBar.commitChanges(); 
}

See Also

In this article