Events Overview
This article lists the clients-side events of the RadMultiSelect and how to use them.
All events follow the MS AJAX client events convention and receive two arguments:
sender
- the RadMultiSelect instance that raised the eventevent arguments
- event-specific data provided to the developer
RadMultiSelect is a wrapper over the Kendo UI MultiSelect widget and so it exposes the client events and data it does. You can find a list below.
The event data is wrapped according to the MS AJAX conventions and the fields you can see in the underlying Kendo Widget are avaliable through a method like
get_<fieldName>()
in theevent arguments
argument of the handler (that is, the second argument the event handler receives). To cancel an event, you must call itsargs.set_cancel(true);
method.
The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.
Listing 1: The client-side events exposed by RadMultiSelect
-
OnChange—Fired when the value of the widget is changed by the user.
-
OnClose—Fired when the popup of the widget is closed. Cancellable.
-
OnDataBound—Fired when the widget is bound to data from its data source.
-
OnDeselect—Fired when an item is deselected or tag is removed.
-
OnFiltering—Fired when the widget is about to filter the data source. Cancellable.
-
OnInitialize—Fired just before the RadMultiSelect client-side object is initialized.
-
OnLoad—Fired when RadMultiSelect is initialized.
-
OnOpen—Fired when the popup of the widget is opened by the user. Cancellable.
-
OnSelect—Fired when an item from the popup is selected by the user. Cancellable.
Examples
Example 1: Store a reference to the client-side object through the OnLoad event
<script>
var multiSelect, kendoMultiSelect;
function OnLoad(sender, args) {
multiSelect = sender; //the RadMultiSelect
kendoMultiSelect = sender.get_kendoWidget(); //the underlying Kendo MultiSelect
}
</script>
<telerik:RadMultiSelect Skin="Default" runat="server" ID="RadMultiSelect1">
<ClientEvents OnLoad="OnLoad" />
</telerik:RadMultiSelect>
Example 2: Get the data associated with the selected item
<script>
function onSelect(sender, args) {
var data = args.get_dataItem();
console.log(data.ProductID);
}
</script>
<telerik:RadMultiSelect RenderMode="Lightweight" ID="RadMultiSelect1" runat="server" DropDownHeight="200px" Width="400"
DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID">
<ClientEvents OnSelect="onSelect" />
</telerik:RadMultiSelect>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] ORDER By ProductName" />
Example 3: Cancel an event
<script>
function OnOpen(sender, args) {
var shouldCancel = true;//use actual business logic
args.set_cancel(shouldCancel);//cancel the event
//in this example, the dropdown will never open
}
</script>
<telerik:RadMultiSelect Skin="Default" runat="server" ID="RadMultiSelect1">
<ClientEvents OnOpen="OnOpen" />
</telerik:RadMultiSelect>