New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

AutoCompleteBox to remain with open dropdown to allow multiselection

HOW TO

Configure the AutoCompleteBox imitate the behavior of the Kendo UI MultiSelect widget by allowing the selection of multiple items without closing the dropdown on item click.

AutoCompleteBox-MultiSelection

SOLUTION

Remove the default click handler of the items container of the AutoCompleteBox' dropdown:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        // http://api.jquery.com/off/
        $telerik.$(sender._dropDown.get_itemsContainer()).off("click").on("click", function (e) {
            sender._dropDown._onDropDownClick(e);

            // reposition the Dropdown if the input is resized
            setTimeout(function () {
                sender._dropDown._dropDown.reflow();
            }, 50);

            //the default code that closed the Dropdown when an item is clicked
            //that.close();
        })
    }
</script>
<telerik:RadAutoCompleteBox runat="server" OnClientLoad="OnClientLoad"
    InputType="Token" Width="300px" DropDownHeight="150" ID="RadAutoCompleteBox1">
</telerik:RadAutoCompleteBox>
protected void Page_Init(object sender, EventArgs e)
{
    RadAutoCompleteBox1.DataSource = new string[] { "Item 1", "Item 2", "Item 3" };
    RadAutoCompleteBox1.DataBind();
}
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
    RadAutoCompleteBox1.DataSource = New String() {"Item 1", "Item 2", "Item 3"}
    RadAutoCompleteBox1.DataBind()
End Sub
In this article
Not finding the help you need? Improve this article