Skip to content

Latest commit

 

History

History
100 lines (72 loc) · 2.55 KB

templates.md

File metadata and controls

100 lines (72 loc) · 2.55 KB
title page_title description slug tags published position
Templates
ComboBox - Templates
Templates in the ComboBox for Blazor.
components/combobox/templates
telerik,blazor,combo,combobox,templates
true
25

ComboBox Templates

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

caption In this article:

Item Template

@template

Header Template

@template

Footer Template

@template

No Data Template

@template

Example

caption Using ComboBox Templates

@* ComboBox component with HeaderTemplate, ItemTemplate, FooterTemplate and NoDataTemplate *@

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

<TelerikComboBox Data="@ComboBoxData" @bind-Value="@Role" Placeholder="Write your position">
    <HeaderTemplate>
        <strong>Select one of the following:</strong>
    </HeaderTemplate>
    <ItemTemplate>
        Are you a <strong>@context</strong>
    </ItemTemplate>
    <FooterTemplate>
        <h6>Total Positions: @ComboBoxData.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>
</TelerikComboBox>

@code {
    private string Role { get; set; }

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

    private List<string> ComboBoxData { get; set; }

    private List<string> SourceData { get; set; } = new List<string> { "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer" };

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

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

See Also