C# (C Sharp) programming: post #1863 — TG.ME

Как упростить работу с иерархическими данными в Blazor

Обычный DropDownList удобен для плоских списков, а TreeView хорошо показывает структуру, но занимает много места.

Telerik предлагает промежуточный вариант - DropDownTree.

Он позволяет выбирать элементы из дерева прямо внутри компактного dropdown:

* категории товаров
* структура компании
* файловая система
* регионы
* роли и permissions

Компонент поддерживает вложенные данные напрямую, поиск по дереву, раскрытие нужных узлов и отображение выбранного пути.

Пример:


<TelerikDropDownTree Data="@Data"
@bind-Value="@SelectedValue"
ValueField="TreeItemId"
Filterable="true">

<DropDownTreeBindings>
<DropDownTreeBinding TextField="Text"
ItemsField="Items" />
</DropDownTreeBindings>

</TelerikDropDownTree>


Главное преимущество - не нужно превращать сложную иерархию в огромный плоский список.

Если данные уже представлены как рекурсивный DTO, их часто можно передать компоненту практически напрямую.

Полезный вариант для Blazor-приложений, где пользователь должен выбирать что-то из большого дерева данных, но постоянно держать TreeView на экране нет смысла.

https://telerik.com/blogs/simplify-hierarchical-selection-blazor-telerik-dropdowntree

#aspnetcore #blazor
August 30, 2026 1.2K 9