MultiSelection modes

16 Aug 20171 minute to read

AutoComplete widget allows you to select multiple values from the suggestions list using the MultiSelectMode property. Multiple values are selected when MultiSelectMode value is set to VisualMode or Delimiter.

Delimiter mode separates multiple items using a separator character defined. When the delimiter mode is set, you can define the delimiter character using DelimiterChar. It takes a single character and it is a symbol.

VisualMode selects multiple items by enclosing the item in a rounded rectangle with a close icon to remove item from the selection.

Configuring MultiSelection Mode

The following steps explain the configuration of the MultiSelectMode for an AutoComplete textbox.

  1. In the View page, define the AutoComplete control and configure multiple selection mode.
  • CSHTML
    • @*Refer to the DataSource defined in Local Data binding Step 1 *@

<div style="width: 600px">

    <div style="display:inline-block; float:left; margin-right:25px">

    <span style="display:block; margin-bottom:12px">Using Delimiter</span> 

        @Html.EJ().Autocomplete("autocomplete")

    .Datasource((IEnumerable<CarsList>)ViewBag.datasource)

    .AutocompleteFields(field => field.Key("UniqueKey").Text("Text"))

    .MultiSelectMode(MultiSelectModeTypes.Delimiter).Delimiter(";")

    </div>

    <div style="display:inline-block; float:left; margin-right:25px">

    <span style="display:block; margin-bottom:12px">Using VisualMode</span> 

        @Html.EJ().Autocomplete("autocompleteVisual")

    .Datasource((IEnumerable<CarsList>)ViewBag.datasource)

    .AutocompleteFields(field => field.Key("UniqueKey").Text("Text"))

    .MultiSelectMode(MultiSelectModeTypes.VisualMode)

    </div>

    <div style="display:inline-block; float:left;">

        <span style="display:block; margin-bottom:12px">Single selection</span>

        @Html.EJ().Autocomplete("autocompleteSingle")

    .Datasource((IEnumerable<CarsList>)ViewBag.datasource)

    .AutocompleteFields(field => field.Key("UniqueKey").Text("Text"))

.MultiSelectMode(MultiSelectModeTypes.None)

    </div>

</div>

    The following image is the output for AutoComplete control with configured multiple selection.

    AutoComplete with MultiSelection