You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The AutoComplete component is a textbox that offers the users hints as they type. These suggestions can be [filtered]({%slug autocomplete-filter%}) as the user types. The user can write their own value or click a suggestion from the dropdown to select it and populate the input. You can control the list of suggestions through [data binding]({%slug autocomplete-databind%}), various appearance settings like [dimensions]({%slug common-features/dimensions%}) and [templates]({%slug autocomplete-templates%}).
13
+
The MultiSelect component lets the user select several items from the available list. It is similar to a `<select multiple>` in this regard. The MultiSelect offers suggestions as you type and they can be [filtered]({%slug multiselect-filter%}). You can control the list of suggestions through [data binding]({%slug multiselect-databind%}), various appearance settings like [dimensions]({%slug common-features/dimensions%}) and [templates]({%slug multiselect-templates%}).
14
14
15
-
To use a Telerik AutoComplete for Blazor
15
+
To use a Telerik MultiSelect for Blazor
16
16
17
-
1. add the `TelerikAutoComplete` tag
17
+
1. add the `TelerikMultiSelect` tag
18
18
1. populate its `Data` property with the collection of items you want in the dropdown
19
-
1. (optional) enable features like [filtering]({%slug autocomplete-filter%}) and clear button
19
+
1. (optional) enable features like [filtering]({%slug multiselect-filter%}) and clear button
20
20
21
-
>caption AutoComplete two-way value binding, main features and simple [data binding](data-bind)
21
+
>caption MultiSelect two-way value binding, main features and simple [data binding](data-bind)
22
22
23
23
````CSHTML
24
24
@* Main features and simple data binding for the suggestions and the Value *@
List<string> Countries { get;set; } = new List<string>();
43
+
List<string> Values { get;set; } = new List<string>();
44
+
45
+
protected override void OnInitialized()
46
+
{
47
+
Countries.Add("Albania");
48
+
Countries.Add("Bosnia & Herzegovina");
49
+
Countries.Add("Bulgaria");
50
+
Countries.Add("Croatia");
51
+
Countries.Add("Kosovo");
52
+
Countries.Add("North Macedonia");
53
+
Countries.Add("Montenegro");
54
+
Countries.Add("Serbia");
55
+
Countries.Add("Slovenia");
56
+
57
+
base.OnInitialized();
58
+
}
37
59
}
60
+
38
61
````
39
62
40
-
>caption The result from the code snippet above, as the user types a custom value
63
+
>caption The result from the code snippet above, after you select something
41
64
42
-
65
+
43
66
44
67
>caption Component namespace and reference
45
68
46
-
The AutoComplete is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations]({%slug autocomplete-databind%}#considerations) article.
69
+
The MultiSelect is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations]({%slug multiselect-databind%}#considerations) article.
47
70
48
-
>caption The AutoComplete provides the following features:
71
+
>caption The MultiSelect provides the following features:
49
72
50
73
*`Class` - the CSS class that will be rendered on the main wrapping element of the combobox.
51
-
*`ClearButton` - whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`.
74
+
*`ClearButton` - whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list.
52
75
*`Data` - allows you to provide the data source. Required.
53
76
*`Enabled` - whether the component is enabled.
54
-
*`Filterable` - whether [filtering]({%slug autocomplete-filter%}) is enabled for the end user (suggestions will get narrowed down as they type).
55
-
*`FilterOperator` - the string operation that will be used for [filtering]({%slug autocomplete-filter%}). Defaults to `StartsWith`.
56
-
*`MinLength` - how many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug autocomplete-filter%}).
57
-
*`Placeholder` - the text the user sees as a hint when there is no text in the input.
77
+
*`Filterable` - whether [filtering]({%slug multiselect-filter%}) is enabled for the end user (suggestions will get narrowed down as they type).
78
+
*`FilterOperator` - the string operation that will be used for [filtering]({%slug multiselect-filter%}). Defaults to `StartsWith`.
79
+
*`MinLength` - how many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug multiselect-filter%}).
80
+
*`Placeholder` - the text the user sees as a hint when there is no selection.
58
81
*`PopupHeight` - the height of the expanded dropdown list element.
59
82
*`PopupWidth` - the width of the expanded dropdown list element.
83
+
*`TextField` - the field in the model from which the text of the items is taken. Defaults to `Text`.
60
84
*`TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
61
-
*`Value` and `bind-Value`- get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `string`.
62
-
*`ValueField` - the name of the field from the model that will be shown as hints to the user. Defaults to `Value`. Not required when binding to a simple list of strings.
85
+
*`TValue` - the type of the value field in the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
86
+
87
+
The type of the values can be:
88
+
89
+
*`number` (such as `int`, `double` and so on)
90
+
*`string`
91
+
*`Guid`
92
+
*`Enum`
93
+
94
+
*`Value` and `bind-Value`- get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `List<TValue>`.
95
+
*`ValueField` - the name of the field from the model that will be used as values in the selection. Defaults to `Value`.
63
96
*`Width` - the width of the main element.
64
-
* Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug autocomplete-templates%}) article for more details.
97
+
* Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug multiselect-templates%}) article for more details.
65
98
* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.
66
99
67
100
101
+
## Examples
102
+
103
+
>caption Pre-select items for the user
104
+
105
+
````CSHTML
106
+
@* If the List of items provided to the component contains an item matching the data source, that item will be selected *@
107
+
108
+
<TelerikMultiSelect Data="@Countries"
109
+
@bind-Value="@Values"
110
+
Placeholder="Enter Balkan country, e.g., Bulgaria"
111
+
Width="350px" ClearButton="true" />
112
+
113
+
@if (Values.Count > 0)
114
+
{
115
+
<ul>
116
+
@foreach (var item in Values)
117
+
{
118
+
<li>@item</li>
119
+
}
120
+
</ul>
121
+
}
122
+
123
+
@code {
124
+
List<string> Countries { get;set; } = new List<string>();
0 commit comments