Events Overview
RadCheckBoxList 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 checkboxlist. The event can be canceled.
-
OnItemClicked (itemClicked) - raised when an item in the checkboxlist 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.
-
OnItemCheckedChanging (itemCheckedChanging) - raised after OnItemCheckedChanging if the item clicked is selected by the user. The event can be canceled.
-
OnItemCheckedChanged (itemCheckedChanged) - raised when the clicked item is selected. The event is subsequent to the OnItemCheckedChanged event.
-
OnItemMouseOver (itemMouseOver) - raised when the mouse hovers over an item in the checkboxlist.
-
OnItemMouseOut (itemMouseOut) - raised when the mouse leaves an item in the checkboxlist.
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:RadCheckBoxList runat="server" ID="RadCheckBoxList1">
<ClientEvents OnItemClicked="OnItemClicked" />
<Items>
<telerik:ButtonListItem Text="English" Selected="true" />
<telerik:ButtonListItem Text="German" />
<telerik:ButtonListItem Text="French" />
</Items>
</telerik:RadCheckBoxList>RadCheckBoxList1.ClientEvents.OnItemClicked = "OnItemClicked"; //passing the name of the JS functionExample 2: Passing an anonymous JavaScript function.
<telerik:RadCheckBoxList runat="server" ID="RadCheckBoxList1">
<ClientEvents OnItemClicked="function(sender,args){var selectedItem = args.get_item(); alert(selectedItem.get_text());}" />
<Items>
<telerik:ButtonListItem Text="English" Selected="true" />
<telerik:ButtonListItem Text="German" />
<telerik:ButtonListItem Text="French" />
</Items>
</telerik:RadCheckBoxList>RadCheckBoxList1.ClientEvents.OnClientClicked = "function(sender,args){var selectedItem = args.get_item(); alert(selectedItem.get_text());}"; //passing an anonymous JS function