[Solved] MarkFirstMatch cursor position problem

[Adam]

Hi everyone,

With ComboBox filtering and MarkFirstMatch, when a user selects a value, the cursor is placed at the end of the selected text.  For text values that are longer than the set width of the actual ComboBox, this means that the beginning of the text value cannot be seen.  This is not desired behavior for us.  Is there a way through properties or javascript code that we can always return the cursor to the beginning of the selected text string?

Thanks so much,

Adam.g

[Simon]

Hello Adam,

By design, RadComboBox puts the cursor at the end of the text, so that the user could continue typing in the input.

Still you could workaround this behavior by calling the selectText method in the SelectedIndexChanged event as below:

function onSelectedIndexChanged(sender, eventArgs) {
    sender.selectText(0, 0);
}

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Adam]

This was a good start to finding a workaround.

selectText(0,0) did not have the desired effect, but selectText(0,1) works correctly.

 

function

 

SelectedIndexChanged( sender, eventArgs) {

 

sender.selectText(0, 1);

}

However, there is one caveat to this approach.  When a user clicks an item, the cursor is indeed at the beginning.  When a user types-ahead, has a value selected, and then tabs out of the ComboBox, the cursor is at the beginning.  BUT, when a user types-ahead, has a value selected, and hits Enter, the cursor is placed at the end of the string.  I'm not exactly sure why this would happen.  Perhaps there is separate logic happening on the Return key press?

Thanks a lot for the help so far,

Adam.g

[Simon]

Hello Adam,

There is separate built-in logic happening on key press indeed. 

You could work around it by handling the keypress event of the input element (in the client side Load event handler of the RadComboBox) as shown below:

function onLoad(sender, eventArgs) {
    var input = sender.get_inputDomElement();

    $telerik.$(input).keypress(function(e) {
        if (e.keyCode == 13)
            sender.selectText(0, 0);
    });
}

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.