Skip to content

Commit 7164202

Browse files
ntachevayordan-mitev
ntacheva
and
yordan-mitev
authored
[4.5] docs(multiselect): Documentation for TagMode (#1597)
* docs(multiselect): Documentation for TagMode * docs(multiselect): minor fixes * Update components/multiselect/tag-mode.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/multiselect/tag-mode.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/multiselect/tag-mode.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/multiselect/tag-mode.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/multiselect/tag-mode.md * Update components/multiselect/tag-mode.md --------- Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent a7ef0b6 commit 7164202

File tree

1 file changed

+144
-0
lines changed

1 file changed

+144
-0
lines changed

‎components/multiselect/tag-mode.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: Tag Mode
3+
page_title: MultiSelect - Tag Mode
4+
description: Explore the available tag modes in the Blazor MultiSelect. See the options that the TagMode parameter of the MultiSelect supports and test it in combination with the MaxAllowedTags property.
5+
slug: multiselect-tag-mode
6+
tags: telerik,blazor,multiselect,tag,mode,single,multiple,summary
7+
published: True
8+
position: 17
9+
---
10+
11+
# MultiSelect Tag Mode
12+
13+
The Tag Mode of the MultiSelect controls how the selected items (tags) will be visualized in the main (input) element of the component.
14+
15+
To configure the tag mode, use the `TagMode` parameter. It accepts a member of the `Telerik.Blazor.MultiSelectTagMode` enum.
16+
17+
The MultiSelect supports three possible configurations for displaying the tags:
18+
19+
* [Single Mode](#single-mode)
20+
* [Multiple Mode (the default)](#multiple-mode)
21+
* [Summarized Tags Based on the Number of Selections](#summarized-tags-based-on-the-number-of-selections)
22+
23+
## Single Mode
24+
25+
When the single tag mode is enabled, only one summary tag will be displayed showing the count of all selected items.
26+
27+
To use the single tag mode, set the `TagMode` parameter to `MultiSelectTagMode.Single`.
28+
29+
>caption MultiSelect with single tag mode
30+
31+
````CSHTML
32+
<TelerikMultiSelect Data="@Countries"
33+
@bind-Value="@SelectedCountries"
34+
TagMode="@MultiSelectTagMode.Single"
35+
Placeholder="Enter Balkan country, e.g., Bulgaria"
36+
Width="350px"
37+
ClearButton="true"
38+
AutoClose="false">
39+
</TelerikMultiSelect>
40+
41+
@code {
42+
private List<string> Countries { get; set; } = new List<string>();
43+
44+
private List<string> SelectedCountries { get; set; } = new List<string>();
45+
46+
protected override void OnInitialized()
47+
{
48+
Countries.Add("Albania");
49+
Countries.Add("Bosnia & Herzegovina");
50+
Countries.Add("Bulgaria");
51+
Countries.Add("Croatia");
52+
Countries.Add("Kosovo");
53+
Countries.Add("North Macedonia");
54+
Countries.Add("Montenegro");
55+
Countries.Add("Serbia");
56+
Countries.Add("Slovenia");
57+
base.OnInitialized();
58+
}
59+
}
60+
````
61+
62+
## Multiple Mode
63+
64+
When the multiple tag mode is enabled, each selected item will be displayed as a separate tag. This is the default `TagMode` value (`MultiSelectTagMode.Multiple`).
65+
66+
>caption MultiSelect with multiple tag mode
67+
68+
````CSHTML
69+
@*This is the default mode, so you do not need to explicitly set it.*@
70+
71+
<TelerikMultiSelect Data="@Countries"
72+
@bind-Value="@SelectedCountries"
73+
TagMode="@MultiSelectTagMode.Multiple"
74+
Placeholder="Enter Balkan country, e.g., Bulgaria"
75+
Width="350px"
76+
ClearButton="true"
77+
AutoClose="false">
78+
</TelerikMultiSelect>
79+
80+
@code {
81+
private List<string> Countries { get; set; } = new List<string>();
82+
83+
private List<string> SelectedCountries { get; set; } = new List<string>();
84+
85+
protected override void OnInitialized()
86+
{
87+
Countries.Add("Albania");
88+
Countries.Add("Bosnia & Herzegovina");
89+
Countries.Add("Bulgaria");
90+
Countries.Add("Croatia");
91+
Countries.Add("Kosovo");
92+
Countries.Add("North Macedonia");
93+
Countries.Add("Montenegro");
94+
Countries.Add("Serbia");
95+
Countries.Add("Slovenia");
96+
base.OnInitialized();
97+
}
98+
}
99+
````
100+
101+
## Summarized Tags Based on the Number of Selections
102+
103+
This setting is an extension of the multiple tag mode. It allows you to display the selected items as separate tags but control the greatest number of individual items that will be visualized. If the selected items count exceeds this number, the MultiSelect will combine the rest of the selections in a summary tag.
104+
105+
To restrict the allowed number of individual tags, use the `MaxAllowedTags` parameter.
106+
107+
>caption MultiSelect accepting up to 2 individual tags
108+
109+
````CSHTML
110+
<TelerikMultiSelect Data="@Countries"
111+
@bind-Value="@SelectedCountries"
112+
TagMode="@MultiSelectTagMode.Multiple"
113+
MaxAllowedTags="2"
114+
Placeholder="Enter Balkan country, e.g., Bulgaria"
115+
Width="350px"
116+
ClearButton="true"
117+
AutoClose="false">
118+
</TelerikMultiSelect>
119+
120+
@code {
121+
private List<string> Countries { get; set; } = new List<string>();
122+
123+
private List<string> SelectedCountries { get; set; } = new List<string>();
124+
125+
protected override void OnInitialized()
126+
{
127+
Countries.Add("Albania");
128+
Countries.Add("Bosnia & Herzegovina");
129+
Countries.Add("Bulgaria");
130+
Countries.Add("Croatia");
131+
Countries.Add("Kosovo");
132+
Countries.Add("North Macedonia");
133+
Countries.Add("Montenegro");
134+
Countries.Add("Serbia");
135+
Countries.Add("Slovenia");
136+
base.OnInitialized();
137+
}
138+
}
139+
````
140+
141+
## See Also
142+
143+
* [Live Demo: MultiSelect Tag Mode](https://demos.telerik.com/blazor-ui/multiselect/tag-mode)
144+

0 commit comments

Comments
 (0)