diff --git a/components/multiselect/templates.md b/components/multiselect/templates.md index 221255c74..9fb192fa6 100644 --- a/components/multiselect/templates.md +++ b/components/multiselect/templates.md @@ -16,6 +16,7 @@ The MultiSelect component allows you to change what is rendered in its items, he * [Item Template](#item-template) * [Tag Template](#tag-template) +* [Summary Tag Template](#summary-tag-template) * [Header Template](#header-template) * [Footer Template](#footer-template) * [No Data Template](#no-data-template) @@ -29,6 +30,14 @@ The MultiSelect component allows you to change what is rendered in its items, he @[template](/_contentTemplates/dropdowns/templates.md#tag-template) +## Summary Tag Template + +The `SummaryTagTemplate` controls the rendering of the summary tag. The Multiselect renders a summary tag in the following cases: +* In [Single Tag Mode](slug:multiselect-tag-mode#single-mode). +* In Multiple Tag Mode—[when the selected items are more than the `MaxAllowedTags`](slug:multiselect-tag-mode#summarized-tags-based-on-the-number-of-selections). + +The context of the `SummaryTagTemplate` is of type `MultiSelectSummaryTagTemplateContext`. It provides an `Items` field (a `List`) that contains the selected items. + ## Header Template @[template](/_contentTemplates/dropdowns/templates.md#header-template) @@ -46,7 +55,7 @@ The MultiSelect component allows you to change what is rendered in its items, he >caption Using MultiSelect Templates ````RAZOR -@* MultiSelect component with HeaderTemplate, ItemTemplate, TagTemplate, FooterTemplate and NoDataTemplate *@ +@* MultiSelect component with HeaderTemplate, ItemTemplate, TagTemplate, SummaryTagTemplate, FooterTemplate and NoDataTemplate *@

@@ -57,6 +66,7 @@ The MultiSelect component allows you to change what is rendered in its items, he @bind-Value="@SelectedRoles" TextField="Title" ValueField="Id" + MaxAllowedTags="@MaxAllowedTags" Placeholder="Write the roles you need"> Select one or more: @@ -68,6 +78,9 @@ The MultiSelect component allows you to change what is rendered in its items, he @context.Title + + @(context.Items.Count() - MaxAllowedTags) more roles selected +

Total Positions: @MultiSelectData.Count()
@@ -80,11 +93,13 @@ The MultiSelect component allows you to change what is rendered in its items, he @code { - private List SelectedRoles { get; set; } + private List SelectedRoles { get; set; } = new List() { 1, 4, 5, 8 }; private bool IsDataAvailable { get; set; } = true; - private List MultiSelectData { get; set; } + private int MaxAllowedTags { get; set; } = 2; + + private List MultiSelectData { get; set; } private List SourceData { get; set; } = new List() {