Edit this page

Events

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.

<script> 
    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) {          
                eventArgs.set_cancel(true);       
            }       
            else {         
                eventArgs.set_cancel(false);       
            } 
        }
    }
</script>
<telerik:radpanelbar id="RadPanelBar1" runat="server" onclientitemclicking="OnClientItemClicking">
...
</telerik:radpanelbar>

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%>");  
    panelBar.add_itemClicked(OnClickedHandler1);
    panelBar.add_itemClicked(OnClickedHandler2);
}

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


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

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