Edit this page

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