How to achieve desired functionality

2 posts, 0 answers
  1. Stuart Watton
    Stuart Watton avatar
    18 posts
    Member since:
    Sep 2009

    Posted 30 Apr 2012 Link to this post

    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?
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 01 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top