Events Overview
RadRadioButtonList exposes several client-side events that allow easy and flexible use in a wide range of application scenarios:
-
OnLoad (load) - raised when the control is initialized.
-
OnItemLoad (itemLoad) - raised when item is loaded.
-
OnItemClicking (itemClicking) - raised when the user clicks an item in the RadioButtonList. The event can be canceled.
-
OnItemClicked (itemClicked) - raised when an item in the RadioButtonList is clicked. The event is subsequent to the OnItemClicking event.
-
OnSelectedIndexChanging (selectedIndexChanging) - raised after OnItemClicking if the item clicked is selected by the user. The event can be canceled.
-
OnSelectedIndexChanged (selectedIndexChanged) - raised when the clicked item is selected. The event is subsequent to the OnSelectedIndexChanging event.
-
OnItemMouseOver (itemMouseOver) - raised when the mouse hovers over an item in the RadioButtonList.
-
OnItemMouseOut (itemMouseOut) - raised when the mouse leaves an item in the RadioButtonList.
To handle the desired event, the user must set the respective property to the name of the JavaScript function handling the event or to an anonymous JavaScript function. Here is an example:
Example 1: Passing a named (non-anonymous) JavaScript function.
<script type="text/javascript">
function OnItemClicked(sender, args) {
var selectedItem = args.get_item();
alert(selectedItem.get_text());
}
</script>
<telerik:RadRadioButtonList runat="server" ID="RadRadioButtonList1">
<ClientEvents OnItemClicked="OnItemClicked" />
<Items>
<telerik:RadioButtonListItem Text="English" Selected="true" />
<telerik:RadioButtonListItem Text="German" />
<telerik:RadioButtonListItem Text="French" />
</Items>
</telerik:RadRadioButtonList>RadRadioButtonList1.ClientEvents.OnItemClicked = "OnItemClicked"; //passing the name of the JS functionExample 2: Passing an anonymous JavaScript function.
<telerik:RadRadioButtonList runat="server" ID="RadRadioButtonList1">
<ClientEvents OnItemClicked="function(sender,args){var selectedItem = args.get_item(); alert(selectedItem.get_text());}" />
<Items>
<telerik:RadioButtonListItem Text="English" Selected="true" />
<telerik:RadioButtonListItem Text="German" />
<telerik:RadioButtonListItem Text="French" />
</Items>
</telerik:RadRadioButtonList>RadRadioButtonList1.ClientEvents.OnClientClicked = "function(sender,args){var selectedItem = args.get_item(); alert(selectedItem.get_text());}"; //passing an anonymous JS function