New to Telerik UI for Blazor? Download free 30-day trial

AutoComplete Templates

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

In this article:

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.

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.

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 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

In this article