PanelBar - Client-side API

  • Add At Runtime
    • RadEditor
    • RadPanelBar
    • RadMenu
    • RadTabStrip
  • Remove At Runtime
    • RadEditor
    • RadPanelBar
    • RadMenu
    • RadTabStrip
  • Disable At Runtime
    • RadEditor
    • RadPanelBar
    • RadMenu
    • RadTabStrip

Event log

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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)
    { 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();      
    //add the newly created item to the Items collection of an item's parent

    To remove an existing item:
    var parentItem = item.get_parent();

    To disable an existing item:

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%>");
//add, remove, disable items
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:
		case ClientOperationType.Remove:
		case ClientOperationType.Update:
			UpdateClientOperation<RadPanelItem> update = operation as UpdateClientOperation<RadPanelItem>;
		case ClientOperationType.Clear:
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • panelbar.xml
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits=" PanelBar.Examples.ClientSide.ClientSideApi.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>

    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.Application.add_load(function() {
            demo.panel = $find("<%=RadPanelBar1.ClientID %>");
            demo.persist = $get("<%=Checkbox2.ClientID %>").checked;
    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Height="250" Width="100%"
            OnClientItemClicked="OnClientItemClicked" ExpandMode="FullExpandedItem">
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                            <asp:CheckBox runat="server" ID="Checkbox2" Checked="True" onclick="Persist();"
                                Text="Persist changes after postback" />
                            <qsf:Button runat="server" ID="Button1" Text="PostBack..." OnClick="Button1_Click" />
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                            <qsf:Button runat="server" AutoPostBack="false" OnClientClicked="toggleItem" Text="Expand/Collapse Item"></qsf:Button>

Find Assistance

Help Us Improve

Was this example helpful?