[Solved] DropDownList Does Not Change Its Input Value

[Jeff]

Whenever I use Telerik's DropDownList and select a different value from the original value, its input field is not being modified with the correct value and thus the plugin that I use to detect input field changes does not detect a change . Below is what is rendered by the dropdown. You will notice the span with t-input has a new value but the input still has the old value. I see that the dropdownlist uses an input field behind the scenes but how come the input field is not being changed and I only see the span with class t-input gets modified. What is weird is that when I force the form to be submitted, the correct value is being passed in. Via javascript, the input field's value is not being modified and thus no changes in the form are detected.

Please enlighten me and help me what I need to check in order to detect that a change has occured. Is it not the input field that gets modified with a new value right away? (reproducibale in your samples code as well via Firebug - http://demos.telerik.com/aspnet-mvc/razor/combobox?theme=hay)

<div class="editor-field">
   <div class="t-widget t-dropdown t-header" tabindex="0">
    <div class="valid t-dropdown-wrap t-state-default">
      <span class="t-input">CALIFORNIA</span>
       <span class="t-select">
   </div>
   <input id="AddressState" class="valid" type="text" value="AR" style="display:none" name="AddressState">
</div>

[Georgi Krustev]

Hello Jeff,

The value is changed, even that the Developer Tool does not show it. Check this screencast. Actually value is changed using .val() method of jQuery. I am not sure why the aforementioned tool does not work in this case.

Regards,
Georgi Krustev
the Telerik team

[Jeff]

Thank you sir. Yeah, I do see it being changed. However, using .val() does not fire a change event. In html's select dropdown and not telerik's dropdown, selecting a different value fires a change event. In your case, you change the value via .val() but forget to trigger a change event which I think you should do via $('#').val().change();

IS there an easy way besides wiring up client events to override this globally somewhere?

[Georgi Krustev]

Hello Jeff,

 
The first solution is to wire "valueChange" event. Thus you will be able to handle the changes.

The other way will be to override this method:

trigger: function (component) {
            this.component = component;
            this.change = function () {
                var previousValue = component.previousValue;
                var value = component.value();
                if (previousValue == undefined || value != previousValue){
                    $t.trigger(component.element, 'valueChange', { value: value });
                    component.$element.change();
                }

                component.previousValue = value;
            }
...

I will forward your suggestion to our developers for further investigation and cosideration.

All the best,
Georgi Krustev
the Telerik team

[Jeff]

Thanks