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

DropDownTree Templates

Updated on Feb 11, 2026

The DropDownTree allows you to define templates to customize the component styling and appearance. This article lists all available templates and shows how to use them.

Footer template
Header template
Item template
No data template
Value template
Complete runnable example

The DropDownTree HeaderTemplate renders optional custom content above the data items in the popup. When filtering is enabled, the header template displays between the filtering textbox and the data items.

Using DropDownTree HeaderTemplate

RAZOR

<TelerikDropDownTree>
    <HeaderTemplate>
        <div style="text-align: center;">
            <strong>DropDownTree Header</strong>
        </div>
    </HeaderTemplate>
</TelerikDropDownTree>

See the runnable example below.

ItemTemplate

The DropDownTree ItemTemplate customizes the content and appearance of the TreeView items in the popup. The template receives a context of type object that you need to cast to your model type.

Unlike the other DropDownTree templates, the <ItemTemplate> tag is a child of the <DropDownTreeBinding> tag. This allows you to have different item templates for different TreeView levels.

Using the same DropDownTree ItemTemplate for all levels

RAZOR

<TelerikDropDownTree>
    <DropDownTreeBindings>
        <DropDownTreeBinding>
            <ItemTemplate>
                @{ TreeItem dataItem = (TreeItem)context; }
                @dataItem.Text
            </ItemTemplate>
        </DropDownTreeBinding>
    </DropDownTreeBindings>
</TelerikDropDownTree>

Using DropDownTree ItemTemplate per level

RAZOR

<TelerikDropDownTree>
    <DropDownTreeBindings>
        <DropDownTreeBinding Level="0">
            <ItemTemplate>
                @{ Category category = (Category)context; }
                @category.Text
            </ItemTemplate>
        </DropDownTreeBinding>
        <DropDownTreeBinding Level="1">
            <ItemTemplate>
                @{ Product product = (Product)context; }
                @product.Text
            </ItemTemplate>
        </DropDownTreeBinding>
    </DropDownTreeBindings>
</TelerikDropDownTree>

See the runnable example below.

NoDataTemplate

The DropDownTree NoDataTemplate allows you to customize the data area of the dropdown when the Data parameter is null or contains no items.

Using DropDownTree NoDataTemplate

RAZOR

<TelerikDropDownTree Data="@DropDownTreeData">
    <NoDataTemplate>
        No Data
    </NoDataTemplate>
</TelerikDropDownTree>

See the runnable example below.

ValueTemplate

The DropDownTree ValueTemplate controls the display of the current Value when the component is closed. The template receives a context of type object that you need to cast to the actual model type. Note the type can vary when using hierarchical data with multiple data item types.

Using DropDownTree ValueTemplate

RAZOR

<TelerikDropDownTree>
    <ValueTemplate>
        @{ TreeItem dataItem = (TreeItem)context; }
        @dataItem.Text
    </ValueTemplate>
</TelerikDropDownTree>

Example

Using DropDownTree templates

<TelerikDropDownTree @ref="@DropDownTreeRef"
                     Data="@DropDownTreeData"
                     @bind-Value="@DropDownTreeValue"
                     @bind-ExpandedItems="@DropDownTreeExpandedItems"
                     ValueField="@nameof(TreeItem.Id)"
                     Width="300px">
    <DropDownTreeBindings>
        <DropDownTreeBinding Level="0">
            <ItemTemplate>
                @{ TreeItem dataItem = (TreeItem)context; }
                <strong style="color: var(--kendo-color-secondary)">@dataItem.Text</strong>
            </ItemTemplate>
        </DropDownTreeBinding>
        <DropDownTreeBinding>
            <ItemTemplate>
                @{ TreeItem dataItem = (TreeItem)context; }
                <span>@dataItem.Text (<strong>@dataItem.ItemCode</strong>)</span>
            </ItemTemplate>
        </DropDownTreeBinding>
    </DropDownTreeBindings>
    <FooterTemplate>
        @if (DropDownTreeData is not null && DropDownTreeData.Count > 0)
        {
            <div class="header-footer">
                Showing @DropDownTreeData.Count() Items
            </div>
        }
    </FooterTemplate>
    <HeaderTemplate>
        <div class="header-footer">
            <strong>DropDownTree Header</strong>
        </div>
    </HeaderTemplate>
    <NoDataTemplate>
        <TelerikButton OnClick="@OnLoadItemsClick">Load Items</TelerikButton>
    </NoDataTemplate>
    <ValueTemplate>
        @{ var dataItem = (TreeItem)context; }

        <TelerikSvgIcon Icon="@SvgIcon.Unlock" />
        <strong style="color: var(--kendo-color-primary)">@dataItem.Text</strong>
    </ValueTemplate>
</TelerikDropDownTree>

<TelerikButton OnClick="@OnRemoveItemsClick">Remove Data</TelerikButton>
<TelerikButton OnClick="@OnLoadItemsClick">Load Data</TelerikButton>

<style>
    .header-footer {
        text-align: center;
        padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
        background: var(--kendo-color-base-subtle);
    }
</style>

@code {
    private TelerikDropDownTree<int>? DropDownTreeRef;
    private List<TreeItem>? DropDownTreeData { get; set; }
    private List<TreeItem> RawData { get; set; } = new();

    private IEnumerable<object> DropDownTreeExpandedItems { get; set; } = new List<object>();

    private int DropDownTreeValue { get; set; }

    private int IdCounter { get; set; }

    private async Task OnRemoveItemsClick()
    {
        DropDownTreeData?.Clear();
        DropDownTreeExpandedItems = new List<TreeItem>();

        await Task.Delay(350);

        DropDownTreeRef?.Open();
    }

    private async Task OnLoadItemsClick()
    {
        DropDownTreeData = new List<TreeItem>(RawData);
        DropDownTreeExpandedItems = DropDownTreeData.Where(x => x.ParentId is null).ToList();

        await Task.Delay(350);

        DropDownTreeRef?.Open();
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            RawData.Add(new TreeItem()
            {
                Id = ++IdCounter,
                Text = $"Tree Item {i}",
                HasChildren = true
            });

            int parentId = IdCounter;

            for (int j = 1; j <= 2; j++)
            {
                RawData.Add(new TreeItem()
                {
                    Id = ++IdCounter,
                    ParentId = parentId,
                    Text = $"Tree Item {i}-{j}",
                    ItemCode = GetRandomCode()
                });
            }
        }

        DropDownTreeData = new List<TreeItem>(RawData);
        DropDownTreeExpandedItems = DropDownTreeData.Where(x => x.ParentId is null).ToList();
    }

    private string GetRandomCode()
    {
        return string.Concat((char)Random.Shared.Next(65, 91),
            (char)Random.Shared.Next(65, 91),
            (char)Random.Shared.Next(65, 91));
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Text { get; set; } = string.Empty;
        public string ItemCode { get; set; } = string.Empty;
    }
}