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)
    	{
    		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;
	}	
}
  • 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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <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">
        //<![CDATA[
        Sys.Application.add_load(function() {
            demo.panel = $find("<%=RadPanelBar1.ClientID %>");
            demo.persist = $get("<%=Checkbox2.ClientID %>").checked;
        });
        //]]>
    </script>
    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Height="250" Width="100%"
            OnClientItemClicked="OnClientItemClicked" ExpandMode="FullExpandedItem">
        </telerik:RadPanelBar>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox runat="server" ID="Checkbox2" Checked="True" onclick="Persist();"
                                Text="Persist changes after postback" />
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="Button1" Text="PostBack..." OnClick="Button1_Click" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" AutoPostBack="false" OnClientClicked="toggleItem" Text="Expand/Collapse Item"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?