Skip to content

chore(MultiSelect): Add documentarion for SummaryTagtemplate #2913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

chore(MultiSelect): Add documentarion for SummaryTagtemplate #2913

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c12f206
chore(MultiSelect): Add documentarion for SummaryTagtemplate
ntacheva Apr 14, 2025
fbe6983
Update components/multiselect/templates.md
ntacheva Apr 15, 2025
1152e8e
Update components/multiselect/templates.md
ntacheva Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions components/multiselect/templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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 two 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<TItem>`. It provides an `Items` field (a `List<TItem>`) that contains the selected items.

## Header Template

@[template](/_contentTemplates/dropdowns/templates.md#header-template)
Expand All @@ -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 *@

<p>
<TelerikCheckBox @bind-Value="@IsDataAvailable" OnChange="@OnCheckBoxChangeHandler" />
Expand All @@ -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">
<HeaderTemplate>
<strong>Select one or more:</strong>
Expand All @@ -68,6 +78,9 @@ The MultiSelect component allows you to change what is rendered in its items, he
<TelerikSvgIcon Icon="@context.Icon"></TelerikSvgIcon>
@context.Title
</TagTemplate>
<SummaryTagTemplate>
@(context.Items.Count() - MaxAllowedTags) more roles selected
</SummaryTagTemplate>
<FooterTemplate>
<h6>Total Positions: @MultiSelectData.Count()</h6>
</FooterTemplate>
Expand All @@ -80,11 +93,13 @@ The MultiSelect component allows you to change what is rendered in its items, he
</TelerikMultiSelect>

@code {
private List<int> SelectedRoles { get; set; }
private List<int> SelectedRoles { get; set; } = new List<int>() { 1, 4, 5, 8 };

private bool IsDataAvailable { get; set; } = true;

private List<Role> MultiSelectData { get; set; }
private int MaxAllowedTags { get; set; } = 2;

private List<Role> MultiSelectData { get; set; }

private List<Role> SourceData { get; set; } = new List<Role>()
{
Expand Down