How to achieve desired functionality

[Stuart Watton]

I have a RadComboBox that I would like to have the following functionality:

When you re-enter the text area of the box I would like the text to be automatically selected and when a character is typed for the text to be replaced with the typed character unless that character is the AutoCompleteSeperator (in my case a semicolon) in which case I would like it to append the semicolon to the text that was already there and the drop down to show all items again.

I have it nearly working the combo box looks like this 

<telerik:RadComboBox ID="rcbPartNumber" runat="server" TabIndex="7" Width="140px" BackColor="#F9D295"
Skin="Vista" EmptyMessage="All" Font-Size="XX-Small" Height="140px" ShowMoreResultsBox="true"
CausesValidation="false" AllowCustomText="true" MarkFirstMatch="true" ShowDropDownOnTextboxClick="true"
OnClientFocus="ClientFocus" OnClientDropDownOpening="ClientFocus" OnClientKeyPressing="onClientDDLKeyPressing"
EnableVirtualScrolling="true" EnableLoadOnDemand="true" AutoPostBack="true" AutoCompleteSeparator=";" />

with the relevant code looking like this.

function onClientDDLKeyPressing(sender, args) {
    var keycode = args.get_domEvent().keyCode;
    if ((keycode == 59) || (keycode == 186)) { //a semicolon - it has 2 possible keycodes
        var currText = sender.get_text();
        varinputBox = sender.get_inputDomElement();
        setCaretPosition(sender.get_inputDomElement(), currText.length) //if this isn't done then the typed semicolon appears at the start of the text rather than at the end
    }
    if ((keycode == 8) || (keycode == 127)) { //a backspace or a delete
        sender.set_text('');
    }

function ClientFocus(sender, eventArgs) {
    var currText = sender.get_text();
    sender.set_text(currText);
    sender.selectText(0, currText.length);
    switch (sender._uniqueId.substr(sender._uniqueId.length - 13, sender._uniqueId.length - 1)) {
        case "rcbPartNumber":
            var hidPartNumJustGotFocus = document.getElementsByName('<%=hidPartNumJustGotFocus.uniqueId %>');
            hidPartNumJustGotFocus[0].value = "1";
            break;
    }
}
}

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if (elem != null) {
        if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if (elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

the SetFocus definitely works as when I move the focus back to the textarea the current text is selected. however when a semicolon is typed the combo box seems to do an ajax callback as if I have pressed enter and leaves the combo box with the text that was there before the semicolon was typed.

Any ideas as to what I am missing or have done wrong?

[Ivana]

Hi Stuart,

Could you take a look at the following online demo and decide whether it will be helpful for your scenario:
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/autocompleteclientside/defaultcs.aspx. It is not a load-on-demand scenario, but the RadComboBox behaves the same when load-on-demand is enabled.

Kind regards,
Ivana
the Telerik team