Events

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

• OnClientItemClicking occurs when the user clicks on an item before the panel bar responds to the click

• OnClientItemClicked occurs immediately after the panel bar responds to an item click

• OnClientItemExpand occurs immediately after an item is expanded

• OnClientItemCollapse occurs immediately after an item is collapsed

• OnClientItemFocus occurs when an item gets focus.

• OnClientItemBlur occurs when an item loses focus.

• OnClientLoad occurs when the panel bar loads on the client.

• OnClientMouseOver occurs when the mouse moves over an item in the panel bar.

• OnClientMouseOut occurs when the mouse moves off of an item in the panel bar.

• OnClientContextMenu occurs when the user right-clicks on an item in 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:

See Also

• Client Side Overview

• RadPanelBar Object

• RadPanelItemCollection Object

• RadPanelItem Object

• Events