MultiSelect Templates

The MultiSelect component allows you to change what is rendered in its items, header and footer through templates.

In this article:

• Item Template
• Tag Template
• Summary Tag Template
• Header Template
• Footer Template
• No Data Template
• Example

Item Template

The ItemTemplate determines how the individual items are rendered in the dropdown of the component. By default, the text from the particular suggestions is rendered.

The ItemTemplate exposes a context which represents the data item object. Cast it to the respective model type to access or render the item properties.

Tag Template

The TagTemplate determines how the selected items are rendered in the main element of the component. By default, the text of the particular item is rendered inside the tag.

The TagTemplate exposes a context which represents the data item object. Cast it to the respective model type to access or render the item properties.

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.
• In Multiple Tag Mode—when the selected items are more than the MaxAllowedTags.

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

The HeaderTemplate controls the content that you can place above the list of items inside the dropdown element. It is always visible when the combobox is expanded. By default it is empty.

Footer Template

The FooterTemplate allows you to render content below the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.

No Data Template

The NoDataTemplate controls the content of the popup element when the component does not have any items. By default, simply "No data" text is rendered.

Example

Using MultiSelect Templates

@* MultiSelect component with HeaderTemplate, ItemTemplate, TagTemplate, SummaryTagTemplate, FooterTemplate and NoDataTemplate *@

<p>
    <TelerikCheckBox @bind-Value="@IsDataAvailable" OnChange="@OnCheckBoxChangeHandler" />
    MultiSelect has data
</p>

<TelerikMultiSelect Data="@MultiSelectData"
                    @bind-Value="@SelectedRoles"
                    TextField="Title"
                    ValueField="Id"
                    MaxAllowedTags="@MaxAllowedTags"
                    Placeholder="Write the roles you need">
    <HeaderTemplate>
        <strong>Select one or more:</strong>
    </HeaderTemplate>
    <ItemTemplate>
        Include <strong>@context.Title</strong>
    </ItemTemplate>
    <TagTemplate>
        <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>
    <NoDataTemplate>
        <div class="no-data-template">
            <TelerikSvgIcon Size="@ThemeConstants.SvgIcon.Size.Large" Icon="@SvgIcon.FilesError"></TelerikSvgIcon>
            <p>No items available</p>
        </div>
    </NoDataTemplate>
</TelerikMultiSelect>

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

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

    private int MaxAllowedTags { get; set; } = 2;

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

    private List<Role> SourceData { get; set; } = new List<Role>()
    {
        new Role(){Id = 1, Title = "Manager", Icon = SvgIcon.User},
        new Role(){Id = 2, Title = "Developer", Icon = SvgIcon.Code},
        new Role(){Id = 3, Title = "QA", Icon = SvgIcon.ValidationXhtml},
        new Role(){Id = 4, Title = "Technical Writer", Icon = SvgIcon.Js},
        new Role(){Id = 5, Title = "Support Engineer", Icon = SvgIcon.QuestionCircle},
        new Role(){Id = 6, Title = "Sales Agent", Icon = SvgIcon.Dollar},
        new Role(){Id = 7, Title = "Architect", Icon = SvgIcon.BuildingBlocks},
        new Role(){Id = 8, Title = "Designer", Icon = SvgIcon.Brush},
    };

    public class Role
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    protected override void OnInitialized()
    {
        MultiSelectData = SourceData;
    }

    private void OnCheckBoxChangeHandler()
    {
        if (IsDataAvailable)
        {
            MultiSelectData = new List<Role>(SourceData);
        }
        else
        {
            MultiSelectData = new List<Role>();
        }
    }
}

See Also

• Live Demo: MultiSelect Templates