Events Overview

Updated over 1 year ago

This article lists the clients-side events of the RadMultiColumnComboBox and how to use them.

All events follow the MS AJAX client events convention and receive two arguments:

1. sender - the RadMultiColumnComboBox instance that raised the event
2. event arguments - event-specific data provided to the developer

RadMultiColumnComboBox is a wrapper over the Kendo UI MultiColumnComboBox 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 the event arguments argument of the handler (that is, the second argument the event handler receives). To cancel an event, you must call its args.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 RadMultiColumnComboBox

• OnCascade—Fired when the value of the widget is changed via API or user interaction. Cancellable.

• 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.

• OnInitialize—Fired just before the RadMultiColumnComboBox client-side object is initialized.

• OnFiltering—Fired when the widget is about to filter the data source. Cancellable.

• OnLoad—Fired when RadMultiColumnComboBox 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 either with mouse/tap or with keyboard navigation. Cancellable.

Examples

Example 1: Store a reference to the client-side object through the OnLoad event

JavaScript

<script>
	var mccb, kendoMccb;
	function OnLoad(sender, args) {
		mccb = sender; //the RadMultiColumnComboBox
		kendoMccb = sender.get_kendoWidget(); //the underlying Kendo MultiColumnComboBox
	}
</script>
<telerik:RadMultiColumnComboBox Skin="Default" runat="server" ID="RadMultiColumnComboBox1">
    <ClientEvents OnLoad="OnLoad" />
</telerik:RadMultiColumnComboBox>

Example 2: Get the data associated with the selected item

JavaScript

<script>
	function OnSelect(sender, args) {
		var data = args.get_dataItem();
		console.log(data.CustomerID);
	}
</script>
<telerik:RadMultiColumnComboBox Skin="Default" runat="server" ID="RadMultiColumnComboBox2" 
    DataSourceID="SqlDataSource1"  DataTextField="ContactName" DataValueField="CustomerID">
	<ClientEvents OnSelect="OnSelect" />
		<ColumnsCollection>
		<telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="ID" />
		<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" />
	</ColumnsCollection>
</telerik:RadMultiColumnComboBox>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
	ProviderName="System.Data.SqlClient"
	SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>

Example 3: Cancel an event

JavaScript

<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:RadMultiColumnComboBox Skin="Default" runat="server" ID="RadMultiColumnComboBox1">
    <ClientEvents OnOpen="OnOpen" />
</telerik:RadMultiColumnComboBox>

See Also

• Live Demo - Client-side Events

• RadMultiColumnComboBox Client-side Object