Getting the ComboBox Client Side Object

The combobox client object is stored in the data store of the combobox element.

The following code snippet shows how to get the the client object of the combobox.

CopyView

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
%>

CopyJavaScript

<script type="text/javascript">
        function getComboBox(){
            // #ComboBox is a jQuery selector based on the "id" attribute of the combobox. The id is set using the Name() method.
            var combobox = $('#ComboBox').data('tComboBox');
            return combobox;
        }
</script>

You can get the client objects of the DropDownList and AutoComplete in a similar way:

CopyGetting the client object of the DropDownList UI Component

var dropDownList = $('#DropDownList').data('tDropDownList');

CopyGetting the client object of the AutoComplete UI Component

var autoComplete = $('#AutoComplete').data('tAutoComplete');

Client Events

Telerik ComboBox for ASP.NET MVC exposes the following client-side events:

• OnLoad - raised when the combobox is initialized.
• OnChange - raised when the value of the combobox is changed.
• OnOpen raised when drop-down list is opening.
• OnClose - raised when drop-down list is closing
• OnDataBinding - raised every time combobox is being databound on the client-side (during Ajax and WebService binding).
• OnDataBound - raised after combobox is databound on the client-side (during Ajax and WebService binding).
• OnError - raised when there is an error after Ajax request (during Ajax or WebService binding).

Note
The DropDownList and AutoComplete UI components expose the same set of client events.

OnLoad

The OnLoad event is raised when the combobox is initialized. Here is a short example showing how to handle that event:

CopySubscribing to the OnLoad event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnLoad("ComboBox_onLoad"))
%>

CopyHandling the OnLoad event

<script type="text/javascript">
function ComboBox_onLoad(){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

OnChange

The OnChange event is raised when the value of the combobox is changed. Here is a short example showing how to handle that event:

CopySubscribing to the OnChange event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnChange("ComboBox_onChange"))
%>

CopyHandling the OnChange event

<script type="text/javascript">
function ComboBox_onChange(){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

OnOpen

The OnOpen is raised when the drop-down list is opening.

CopySubscribing to the OnOpen event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnOpen("ComboBox_OnOpen"))
%>

CopyHandling the OnOpen event

<script type="text/javascript">
function ComboBox_OnOpen(e){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

The OnOpen event can be cancelled which will prevent the opening of the item list. To cancel the event use the preventDefault method of the event argument.

CopyCancelling the OnClose event

<script type="text/javascript">
function ComboBox_OnOpen(e){
   // cancelling the OnOpen event
   e.preventDefault();
}
</script>

OnClose

The OnClose is raised when the drop-down list is closing.

CopySubscribing to the OnClose event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnClose("ComboBox_OnClose"))
%>

CopyHandling the OnClose event

<script type="text/javascript">
function ComboBox_OnClose(e){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

The OnClose event can be cancelled which will prevent the closing of the item list. To cancel the event use the preventDefault method of the event argument.

CopyCancelling the OnClose event

<script type="text/javascript">
function ComboBox_OnClose(e){
   // cancelling the OnClose event
   e.preventDefault();
}
</script>

OnDataBinding

The OnDataBinding event is raised every time the combobox is being databound on the client-side (during Ajax and WebService binding).

CopySubscribing to the OnDataBinding event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnDataBinding("ComboBox_OnDataBinding"))
%>

CopyHandling the OnDataBinding event

<script type="text/javascript">
function ComboBox_OnDataBinding(e){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

The OnDataBinding event can be cancelled which would prevent the combobox from binding. To cancel the event use the preventDefault method of the event argument.

CopyCancelling the OnDataBinding event

<script type="text/javascript">
function ComboBox_OnDataBinding(e){
   // cancelling the OnDataBinding event
   e.preventDefault();
}
</script>

OnDataBound

The OnDataBound event is raised after the combobox is databound on the client-side (during Ajax and WebService binding).

CopySubscribing to the OnDataBound event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnDataBound("ComboBox_OnDataBound"))
%>

CopyHandling the OnDataBound event

<script type="text/javascript">
function ComboBox_OnDataBound(e){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
    // Use the combobox client object
}
</script>

OnError

The OnError event is raised when there is an error after Ajax request (during Ajax or WebService binding).

CopySubscribing to the OnError event

<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events.OnError("ComboBox_OnError"))
%>

CopyHandling the OnError event

<script type="text/javascript">
function ComboBox_OnError(e){
    var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')

    //the current XMLHttpRequest object
    var xhr = e.XMLHttpRequest;
    //the text status of the error - 'timeout', 'error' etc.
    var status = e.textStatus;

    if (status == 'error') {
       //xhr.status is the HTTP code returned by the server
       if (xhr.status == "404") {
           alert("requested url not found")
       }
    }

    //To prevent the default error handling (which is to alert the error message) you can call `preventDefault`

    e.preventDefault();
}
</script>

Client Methods

The combobox client object exposes the following client-side methods (also applicable to the AutoComplete and DropDownList):

• value - gets or sets the value of the combobox.
• text - gets or sets the text of the combobox.
• open - opens the drop-down list.
• close closes the drop-down list.
• highlight - highlights a specific item.
• select - selects item from the drop-down list.
• enable - enables the combobox.
• disable - disables the combobox.
• dataBind - populates the combobox with data.
• reload - re-populates the combobox.