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


RadPanelBar supports a number of client-side events that let you customize the behavior of the panel bar:

To use these events, simply write a javascript function that can be called when the event occurs. Then assign the name of the javascript function as the value of the the corresponding RadPanelBar property.

    function OnClientItemClicking(sender, args) {    
        var item = eventArgs.get_item();    
        var navigateUrl = item.get_navigateUrl();    
        if (navigateUrl && navigateUrl != "#") {       
            var proceed = confirm("Navigate to "+ navigateUrl + " ?");       
            if (!proceed) {          
            else {         
<telerik:radpanelbar id="RadPanelBar1" runat="server" onclientitemclicking="OnClientItemClicking">

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

function onClickedHandler1()
    alert("First handler called");

function onClickedHandler2()
    alert("Second handler called");

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

Another advantage of the client-side API is that you can detach an event handler dynamically:

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

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

Server-Side Name Client-SideName Methods to add and Remove
OnClientLoad load add_load, remove_load
OnClientItemClicking itemClicking add_itemClicking, remove_itemClicking
OnClientItemClicked itemClicked add_itemClicked, remove_itemClicked
OnClientItemExpand itemExpand add_itemExpand, remove_itemExpand
OnClientItemCollapse itemCollapse add_itemCollapse, remove_itemCollapse
OnClientItemBlur itemBlur add_itemBlur, remove_itemBlur
OnClientItemFocus itemFocus add_itemFocus, remove_itemFocus
OnClientMouseOver mouseOver add_mouseOver, remove_mouseOver
OnClientMouseOut mouseOut add_mouseOut, remove_mouseOut
OnClientContextMenu contextMenu add_contextMenu, remove_contextMenu

See Also

In this article