Events

RadAutoCompleteBox supports a number of client-side events that let you customize its behavior:

• OnClientDropDownOpening occurs right before the drop-down container is opened.

• OnClientDropDownOpened occurs right after the drop-down container is opened.

• OnClientDropDownClosing occurs right before the drop-down container is closed.

• OnClientDropDownClosed occurs right after the drop-down container is closed.

• OnClientEntryAdding occurs right before an entry is added into the Entry collection. The event will be raised only if the input type of RadAutoCompleteBox is set to "Token".

• OnClientEntryAdded occurs right after an entry is added into the Entry collection. The event will be raised only if the input type of RadAutoCompleteBox is set to "Token".

• OnClientEntryRemoving occurs right before an entry is removed from the Entry collection. The event will be raised only if the input type of RadAutoCompleteBox is set to "Token".

• OnClientEntryRemoved occurs right after an entry is removed from the Entry collection. The event will be raised only if the input type of RadAutoCompleteBox is set to "Token".

• OnClientTextChanged occurs when the text currently present in the input area is changed and RadAutoComplete has lost its focus. The event will be raised only if the input type of RadAutoCompleteBox is set to "Text".

• OnClientRequesting occurs right before a request for items is sent to the data source.

• OnClientRequested occurs when the request for items is completed, and the items are loaded into the drop-down container.

• OnClientRequestFailed occurs in case of unsuccessful request sent to the data source.

• OnClientDropDownItemDataBound occurs for each item that is created during a request to a Web service.

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 RadAutoCompleteBox property.

<script language="javascript" type="text/javascript">
    function MyClientDropDownClosed(sender, eventArgs) {
        alert("Drop-down closed.");
    }
</script>

<telerik:RadAutoCompleteBox RenderMode="Lightweight" 
    id="RadAutoCompleteBox1" 
    runat="server" 
    OnClientDropDownClosed="MyClientDropDownClosed">
</telerik:RadAutoCompleteBox>

You can also assign event handlers in client-side code:

function MyClientDropDownClosed(sender, eventArgs) {
    alert("Drop-down closed.");
}

function pageLoad() {
    var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
    autoComplete.add_dropDownClosed(MyClientDropDownClosed);
}

Another advantage of the client-side API is that you can detach an event handler dynamically:

function RemoveEventHandler() {
    var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
    autoComplete.remove_dropDownClosed(MyClientDropDownClosed);
}

Note that on the client-side, the names of events are slightly different than those used in the mark-up declaration of the control. The following table lists all the add and remove handler functions for RadAutoCompleteBox client-side events:

Name in the mark-up	Methods to Add and Remove handler
OnClientDropDownOpening	add_dropDownOpening(), remove_dropDownOpening().
OnClientDropDownOpened	add_dropDownOpened(), remove_dropDownOpened().
OnClientDropDownClosing	add_dropDownClosing(), remove_dropDownClosing().
OnClientDropDownClosed	add_dropDownClosed(), remove_dropDownClosed().
OnClientEntryAdding	add_entryAdding(), remove_entryAdding().
OnClientEntryAdded	add_entryAdded(), remove_entryAdded().
OnClientEntryRemoving	add_entryRemoving(), remove_entryRemoving().
OnClientEntryRemoved	add_entryRemoved(), remove_entryRemoved().
OnClientTextChanged	add_textChanged(), remove_textChanged().
OnClientRequesting	add_requesting(), remove_requesting().
OnClientRequested	add_requested(), remove_requested().
OnClientRequestFailed	add_requestFailed(), remove_requestFailed().
OnClientDropDownItemDataBound	add_dropDownItemDataBound(), remove_dropDownItemDataBound().

For a live example of using client-side events, see Client Events Demo.

See Also

• Overview