How to reset the dropdown list to show all elements

[Csaba Gyozo]

I have added some client script to a dropdown that automatically highlights and checks an item when pressing enter and also appends a comma after the text. The problem is that when I press enter the dropdown still remains filtered. How can I reset the dropdown to show all the items.

Here is the problem as a gif:

Error

When I press enter Argentina gets selected, the comma is appended but the dropdown list isn't reset to show all the items. How do I do this? Any other suggestions to how can I append the comma automatically without using any hacks are also welcome.

 

Code:

 

<telerik:RadComboBox ID="rcbCountries" runat="server" Width="287px" CheckBoxes="true"  EnableCheckAllItemsCheckBox="true"
    CheckedItemsTexts="DisplayAllInInput" AllowCustomText="true" EnableLoadOnDemand="false" MaxHeight="400px" Height="400px"
    NoWrap="true" AutoPostBack="false" EmptyMessage="Partner's country" MarkFirstMatch="true" AutoCompleteSeparator=", "
    Filter="Contains"
    OnClientBlur="rcbCountries_Blur" OnClientFocus="otherCB_Focus" OnClientItemChecked="rcbCheckboxChecked"
    OnClientKeyPressing="rcbCheckboxKeyPressed" OnClientDropDownClosing="rcbDropdownClosing"

    EnableTextSelection="False">
</telerik:RadComboBox>

 

function rcbCheckboxKeyPressed(sender, args) {
    if (args.get_domEvent().keyCode == 13) {
        var highlighted = sender.get_highlightedItem();
        if (!highlighted)
            sender.highlightMatches();
        var highlighted = sender.get_highlightedItem();

        if (highlighted) {
            highlighted.check();
            rcbCheckboxChecked(sender, args);

            $(sender.get_element()).data('keep-dropdown-open', true);
        }
    }
}

function rcbCheckboxChecked(sender, eventArgs) {
    //hack: There is no event to handle that allows us to add a comma at the end
    setTimeout(function () {
        appendComma(sender);
    }, 0);
}

function rcbDropdownClosing(sender, args) {
    if ($(sender.get_element()).data('keep-dropdown-open') === true)
        args.set_cancel(true);
}

function appendComma(sender) {
    if (sender.get_checkedItems().length == 0) return;

    var text = $.trim(sender.get_text());
    if (text.length > 0 && !text.match(/,\s*$/)) {
        sender.set_text(text + ", ");
    }
}

 

 

 

 

[Csaba Gyozo]

It seems I cannot edit so I post this as a reply instead:

I have to press backspace and space to trigger the refresh of the dropdown. How can I do this programatically.