PanelBar - Client-side Events

  • ASP.NET controls
    • RadMenu
    • RadTabStrip
    • RadPanelBar
    • RadTreeView
  • WinForms controls
    • RadMenustrip
    • RadTabStrip
    • RadToolStrip
  • Other projects
    • SiteFinity
    • Reporting
    • RadAjax

Event log

Demo Configurator

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

RadPanelBar provides a number of client-side events that would allow you to accomplish even the most complicated tasks.



You can attach to the RadPanelBar's events by using either the server-side properties or the client-side API.

  1. Attaching event handlers via a server-side property
    Each client-side event has a corresponding property, whose name is formed like OnClient[EventName].
    You can set the property to the name of the function to be called when the event occurs.
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicking="onClicking" />
    
    <script type="text/javascript">
    	function onClicking(sender, eventArgs) 
    	{ 
    		var item = eventArgs.get_item();		
                    ...
    	} 
    </script>
    		
  2. Using the client-side API to attach event handlers
    Using the client-side API of RadPanelBar allows you to attach multiple event handlers to one event using the standard MS AJAX conventions.
    <script type="text/javascript">
    	function onClickingHandler1()
    	{
    		alert("First handler called");
    	}
    	function onClickingHandler2()
    	{
    		alert("Second handler called");
    	}
    
    	function pageLoad()
    	{
    		var panelBar = $find("<%=RadPanelBar1.ClientID%>");
    		
    		panelBar.add_itemClicking(onClickingHandler1);
    		panelBar.add_itemClicking(onClickingHandler2);
    	}
    </script>
    
    Another advantage of the client-side API is the possiblity of dynamically detaching certain handlers. You can use the remove_itemClicking method of the panelbar object.

    <script type="text/javascript">
    	$find(<%=RadPanelBar1.ClientID%>).remove_itemClicking(onClickedHandler1);
    </script>
    
  3. Cancelling an event
    The events, whose names end in ing, can be cancelled. You can cancel the event by using the set_cancel method of the event arguments passed to the handler.
    <script type="text/javascript">
    	function onClientItemClicking(sender, eventArgs)
    	{
    	    eventArgs.set_cancel(true);
    	}
    </script>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="PanelBar.Examples.ClientSide.ClientSideEvents.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>

    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="100%" Height="336px" ExpandMode="FullExpandedItem">
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenu">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadTabStrip">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadPanelBar">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadTreeView">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="WinForms controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenustrip">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadTabStrip">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadToolStrip">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Other projects">
                    <Items>
                        <telerik:RadPanelItem Text="SiteFinity">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Reporting">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="RadAjax">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"  Title="Demo Configurator">
        <Views>
            <qsf:View Title="Available actions">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="MouseOut" runat="server" Text="OnClientMouseOut" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="MouseOver" runat="server" Text="OnClientMouseOver" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="ItemClicking" runat="server" Text="OnClientItemClicking" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ItemClicked" runat="server" Text="OnClientItemClicked" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="ItemOpen" runat="server" Text="OnClientItemExpand" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="ItemClose" runat="server" Text="OnClientItemCollapse" AutoPostBack="True"
                                Checked="True"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ItemFocus" runat="server" Text="OnClientItemFocus" AutoPostBack="True"
                                Checked="True"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="ItemBlur" runat="server" Text="OnClientItemBlur" AutoPostBack="True"
                                Checked="True"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?