[Solved] 2011.1.315 - Breaking Change

[Emmet Ahlstrom]

The 2011.1.315 release has a breaking change with the ComboBox control. The Id for the controls visible element has changed, so any JavaScript using that Id breaks. For example $('#MyComboBox').focus(); worked in version 2010.3 but is now broken in version 2011.1.315. 

In version 2010.3 when the ComboBox html is rendered the controls visible div container was given the id based on the controls name and the hidden input's id has -value appended to it. For example:

<div class="t-widget t-dropdown t-header" id="MyComboBox">
    <div class="t-dropdown-wrap t-state-default">
        <span class="t-input">Option 1</span>
        <span class="t-select">
            <span class="t-icon t-arrow-down">select</span>
        </span>
    </div>
</div>
<input id="MyComboBox-value" name="MyComboBox" style="display:none" type="text" value="0">

Now with version 2011.1.315 the rendered html no longer has an Id on the containing div element and the Id of the hidden input changed (the appended "-value" was removed):

<div class="t-widget t-dropdown t-header">
    <div class="t-dropdown-wrap t-state-default">
        <span class="t-input">Option 1</span>
        <span class="t-select">
            <span class="t-icon t-arrow-down">select</span>
        </span>
    </div>
    <input id="MyComboBox" name="MyComboBox" style="display:none" type="text" value="0" />
</div>

Now all JavaScript that may have referenced one of these elements is now broken. For my case its mostly .focus() calls, but I'm sure there could be other developers running into this issue for other things as well.

Ideally we would be able to script against the ComboBox's jquery object but there isn’t a focus event according to the documentation. http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-combobox-client-api-and-events.html, .

Is this a permanent change or will it revert back to the same naming style as version 2010.3?

[Georgi Krustev]

Hello Emmet,

 
This decide to make this breaking change in order to provide more accessible component. For instance now <label for="ComboBoxId">Text</label> works correctly, like with HTML Select element. As a side note it is harder to get input value with JavaScript, because of the added "-value" string which is not expected.

To answer your question, this change is permanent and will not be reverted. For more information about breaking changes check this help topic.

Regards,
Georgi Krustev
the Telerik team

[Emmet Ahlstrom]

So what is the recommend way to set focus on the control?

[Georgi Krustev]

Hello Emmet,

 
As you know there are two inputs, first one holds the Item.Text value and the second one, which is not visible holds the Item.Value. So to focus ComboBox UI component you will need to find visible input element and focus it:

$("#ComboBox").parent().find("input:first").focus();

I am not sure that $('#MyComboBox').focus(); worked in the previous version, because $('#MyComboBox') returns DIV element which cannot be focused because it does not have tabIndex.

Kind regards,
Georgi Krustev
the Telerik team

[Emmet Ahlstrom]

As you can see in the html posted in my first post, repeated below, the only input rendered is hidden. From what I can tell there is no way to set focus on a drop down list? The closest we can get is the parent div: 

$("#MyComboBox").parent().focus();

I hope I'm overlooking something. I'd think setting focus would be a common function. Is there anyway it can be added to the client API? 

<div class="t-widget t-dropdown t-header">

    <div class="t-dropdown-wrap t-state-default">

        <span class="t-input">Option 1</span>

        <span class="t-select">

            <span class="t-icon t-arrow-down">select</span>

        </span>

    </div>

    <input id="MyComboBox" name="MyComboBox" style="display:none" type="text" value="0" />

</div>

 

[Georgi Krustev]

Hello Emmet,

 
Please excuse me for not understanding you correctly.

When you said "ComboBox" I thought that you are pointing ComboBox UI component. The code snippet which I have provided can be used to focus visible input element of the ComboBox UI Component.

As to the DropDownList UI component, you will need to use the code excerpt which you have provided in your last post. 

I will log your request to our product backlog list for further consideration and possible implementation.

Kind regards,
Georgi Krustev
the Telerik team