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:
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 |