How to align to the left the text of the ComboBoxItem when it is too long

[Misty Fowler]

Some of the items in my RadComboBox are long, and wrap when the dropdown opens. The issue is that in Internet Explorer, when you select one of these items with your mouse, the selected item is aligned wrong. It should display the beginning of the selection, with the end of it hidden. That is the behavior in other browsers. IE also works properly when you use the keyboard to make the selection. This issue is only when the mouse is used to select the item. It appears that using the mouse leaves the text selected, and might have something to do with why this is happening, but setting EnableTextSelection to false does not resolve the issue.

In the demo, if you look at it in IE, you can reproduce the problem. After loading the page, use the mouse to open the "Dealer" combo. It's the most obvious when you select an item that's very long, such as "Nord-Ost-Fisch Handelsgesellschaft mbH". The text that will show is "Ost-Fisch Handelsgesellschaft mbH", because it's aligned wrong. What should be showing is "Nord-Ost-Fisch Handelsgesellsch".

I do see an article for your Silverlight controls that shows how to resolve the issue, so I'm hoping you have a resolution for these controls.

Thanks,

Misty

[Kamen Bundev]

Hello Misty Fowler,

Thank you for contacting us.

You can assign these handlers to OnClientDropDownClosing and OnClientKeyPressing RadComboBox events:
function keyPressing(sender, args) {
    var event = args.get_domEvent();
    
    if (event.type == 'keydown' && (event.keyCode == 38 || event.keyCode == 40))
        setTimeout( function () { dropDownClosing(sender, args) }, 0 );
}

function dropDownClosing (sender, args) {
    var inputElement = sender.get_inputDomElement();
    
    if (inputElement.setSelectionRange)
        inputElement.setSelectionRange(0, 0);
    else {
        var textRange = inputElement.createTextRange();
        textRange.moveEnd('sentence', -100000); // A bug in IE prevents selecting proper range.
        textRange.moveStart("character", 0);
        textRange.moveEnd("character", 0);
        textRange.select();
    }
}

These will remove the selection before it scrolls the input viewport.

Let me know if this helps.

All the best,
Kamen Bundev
the Telerik team

[Misty Fowler]

Yes, this is exactly what I needed. Thanks much!