MultiSelect

Renders a dropdown list that allows multiple values to be selected.

Node name: multi-select

Attributes

Bound

Attribute	Type	Required	Default value	Description
property-name	`string`	`true`		UI view property name
item	UI view	`false`	`@DatasourceCurrent`	Item to be bound to

Important

The property must be a String Array property or a .NET type property.

Unbound

Attribute	Type	Required	Default value	Description
label	`string`	`false`		Input label.
disabled	`bool`	`false`	`false`	Value indicating whether the input is disabled.
readonly	`bool`	`false`	`false`	Value indicating whether the input is read-only.
required	`bool`	`false`	`false`	Value indicating whether the input is required.
message-text	`string`	`false`		Additional message displayed next to the component. Usually a warning or an error message.
message-severity	`string` (`information`, `warning`, `error`)	`false`		Severity of the additional message displayed next to the component.
documentation	`string`	`false`		Documentation.
placeholder	`string`	`false`		Short hint that describes the expected value.
tab-stop	`bool`	`false`	`true`	Value indicating whether the input can be focused using the `Tab` key.
value-changed	`string`	`false`		Name of the method called when the value has changed. The first parameter is the value and the second is the current item of the data source (`DatasourceCurrent`) or the iterated item in a `repeat` component.

Common

Attribute	Type	Required	Default value	Description
value	`object[]`	`true`		Selected values.
label-position	`string` (`top`, `left`, `right`, `hidden`)	`false`	`top`	Input label position.
message-position	`string` (`bottom`, `hidden`)	`false`	`bottom`	Input message position.
focused	`bool`	`false`	`false`	Value indicating whether the component is focused.
enum	`string`	`false`		Enumeration name.
values	`string[]`, `object[]`	`false` if `enum` is defined, `true` otherwise		Values list.
value-property	`string`	`true` if `values` is `object[]`, `false` otherwise		Object property used as the selected value.
display-property	`string`	`true` if `values` is `object[]`, `false` otherwise		Object property used as display text.
searchable	`bool`	`false`	`false`	Value indicating whether search is enabled.
max-displayed-chips	`int`	`false`	`1`	Maximum number of selected values displayed as chips. Additional selections are represented by a counter.

Examples

Bound

String values

In the following example, the SelectedTags property can contain multiple values from the TagNames list defined in a field.

<multi-select property-name="SelectedTags" values="@Fields.TagNames" />

Object values

In the following example, the SelectedTagCodes property can contain the Code values of multiple data objects from the Tags list. The Caption property is used to display the available entries.

<multi-select property-name="SelectedTagCodes" values="@Fields.Tags" value-property="Code" display-property="Caption" />

Enum values

In the following example, the SelectedStatuses property can contain multiple values from the OrderStatus enumeration.

<multi-select property-name="SelectedStatuses" enum="OrderStatus" />

Unbound

String values

In the following example, the SelectedTags field can contain multiple values from the TagNames list defined in a field.

<multi-select value="@Fields.SelectedTags" label="@Resources.MyModule.TagsCaption" values="@Fields.TagNames" />

Object values

In the following example, the SelectedTagCodes field contains the Code values of the selected data objects. The Caption property is used to display the available entries.

<multi-select value="@Fields.SelectedTagCodes" label="@Resources.MyModule.TagsCaption" values="@Fields.Tags" value-property="Code" display-property="Caption" />

Enum values

In the following example, the SelectedStatuses field can contain multiple values from the OrderStatus enumeration.

<multi-select value="@Fields.SelectedStatuses" label="@Resources.MyModule.StatusesCaption" enum="OrderStatus" />

Search and displayed chips

The searchable attribute displays a search input in the dropdown. The max-displayed-chips attribute limits the number of selected values displayed as chips; the remaining number of selections is displayed as a counter.

<multi-select value="@Fields.SelectedTags" values="@Fields.TagNames" searchable="true" max-displayed-chips="3" />

Customize chips and options template

By default, display-property is used to render both selected chips and dropdown options. Their content can be customized independently:

multi-select-chip-template customizes each selected value displayed as a chip.
multi-select-option-template customizes each entry in the dropdown list.

The selected or iterated value is available through $Item in both templates.

<multi-select value="@Fields.SelectedCountryCodes" values="@Fields.Countries" value-property="Code" display-property="Caption">
    <multi-select-chip-template>
        <horizontal-layout wrap="false">
            <image name="$Item.Flag" />
            <text>$Item.ShortCaption</text>
        </horizontal-layout>
    </multi-select-chip-template>
    <multi-select-option-template>
        <horizontal-layout wrap="false" layout:width="fill">
            <image name="$Item.Flag" />
            <text>$Item.FullCaption</text>
        </horizontal-layout>
    </multi-select-option-template>
</multi-select>

Table of Contents

MultiSelect

Attributes

Important

Examples