Odd OnChange Behavior

[Chris]

Found an oddity with the OnChange event and the select method.  Essentially when someone clicks on a selection, a confirm box checks to be sure if they want to navigate, and if not then it reselects the previous value.  The issue scenarios are as follows:

A -

1) Select an option.
2) Click 'Cancel' in the confirm dialog.
3) See that the previous option is showing in the combobox.
4) Select another option and note that the change event does NOT fire.  No idea why the onclick event is not firing.

B -

1) Select an option.
2) Click 'Cancel' in the confirm dialog.
3) Click elsewhere on the page and note that the change event DOES fire unexepectedly.  It appears that this is happening in the telerik.list.js in the 'mousedown' event handler that is setup in the initialize function.

Here is the code:

<%= Html.Telerik().ComboBox()
    .Name("TestSelect")
    .BindTo(Model.List)
    .SelectedIndex(Model.SelectedIndex)
    .ClientEvents(events => events.OnChange("onChangeTest"))%>

<script type="text/javascript">
    function onChangeTest(e) {
        var el = $("#TestSelect").data("tComboBox");
        var $items = el.dropDown.$element.find('> .t-reset > .t-item');
        var value = el.value();
        var text = el.text();
        var previousIndex = <%: Model.SelectedIndex %>;
        if (confirm('Do you want to navigate?'))) {
            window.location.href = 'some url/' + id
        }
        else {
            el.select($items[previousIndex]);
        }
    }
</script>

[Chris]

Oops forgot to mention:

.NET 4.0
2010_3_1110 source

[Georgi Krustev]

Hello Chris,

Because OnChange event is not cancellable pre-selecting item in the aforementioned event handler is not correct. Anyway you can overcome this limitation with the following code snippet:

function onChangeTest(e) {
    var el = $("#TestSelect").data("tComboBox");
    var previousIndex = <%: 0 %>;
    if (confirm('Do you want to navigate?')) {
        window.location.href = 'some url/' + id
    }
    else {
        setTimeout(function(){el.value(el.data[previousIndex].Value);}, 0);
    }
}

Regards,
Georgi Krustev
the Telerik team

[Chris]

Georgi,

I'll give that a try.  What about the B scenario?

[Chris]

Georgi,

I tried the solution and it seems to resolve both the issues.