autocompletebox-allow-multiselection.md

title	description	type	page_title	slug	res_type
AutoCompleteBox to remain with open dropdown to allow multiselection	AutoCompleteBox to remain with open dropdown to allow multiselection. Check it now!	how-to	AutoCompleteBox to remain with open dropdown to allow multiselection	autocompletebox-allow-multiselection	kb

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.

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