Как упростить работу с иерархическими данными в 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