Skip to content

Latest commit

 

History

History
99 lines (72 loc) · 2.63 KB

templates.md

File metadata and controls

99 lines (72 loc) · 2.63 KB
title page_title description slug tags published position
Templates
AutoComplete - Templates
Templates in the AutoComplete for Blazor.
autocomplete-templates
telerik,blazor,combo,autocomplete,templates
true
20

AutoComplete Templates

The AutoComplete 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 AutoComplete Templates

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

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

<TelerikAutoComplete Data="@AutoCompleteData" @bind-Value="@Role" Placeholder="Write your position">
    <HeaderTemplate>
        <strong>Write your own if you don't see it in the list</strong>
    </HeaderTemplate>
    <ItemTemplate>
        Are you a <strong>@context</strong>
    </ItemTemplate>
    <FooterTemplate>
        <h6>Total Positions: @AutoCompleteData.Count()</h6>
    </FooterTemplate>
    <NoDataTemplate>
        <div class="no-data-template">
            <TelerikSvgIcon Icon="@SvgIcon.FilesError" Size="@ThemeConstants.SvgIcon.Size.Large"></TelerikSvgIcon>
            <p>No items available</p>
        </div>
    </NoDataTemplate>
</TelerikAutoComplete>

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

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

    private List<string> AutoCompleteData { 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()
    {
        AutoCompleteData = SourceData;
    }

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

See Also