C# Blazor RadzenTree 사용하기

C# Blazor RadzenTree 사용하기

 

RadzenTree 컨트롤은 Tree 계층구조의 데이터를 표시하기 위한 컨트롤로 부모 자식의 관계를 표시할 때 사용됩니다.

아래 예시는 메뉴를 표시할때 처리 방법을 알아보려고 합니다.

먼저 RadzenTree 컨트롤에 사용될 Model 을 정의합니다.

namespace Blazor.RadzenTest.Data
{
    public partial class MenuItem
    {
        public int MenuID { get; set; }
        public ICollection<MenuItem>? MenuItems { get; set; }
        public string? MenuName { get; set; }
        public string? MenuDescription { get; set; }
        public string? MenuImage { get; set; }
    }
}

Model 구조를 보면 알수있듯이 MenuItems 항목이 자식메뉴 항목입니다.

RadzenTree 컨트롤에서 자식 데이터가 있는 경우 확장 아이콘이 표시됩니다.

@page "/"

@using Blazor.RadzenTest.Data

<h3>TreeBindingPage</h3>

<RadzenTree Data="@menus">
    <RadzenTreeLevel TextProperty="MenuName" ChildrenProperty="MenuItems" />
    <RadzenTreeLevel TextProperty="MenuName" HasChildren="@((menuItem) => false)" />
</RadzenTree>

@code {
    IEnumerable<MenuItem>? menus;

    protected override void OnInitialized()
    {
        MenuItem parent1 = new MenuItem() { MenuID = 1, MenuName = "부모1", MenuDescription = "부모1입니다." };
        MenuItem child1 = new MenuItem() { MenuID = 11, MenuName = "자식1", MenuDescription = "자식1입니다." };
        MenuItem child2 = new MenuItem() { MenuID = 12, MenuName = "자식2", MenuDescription = "자식2입니다." };
        parent1.MenuItems = new List<MenuItem>() { child1, child2 };

        MenuItem parent2 = new MenuItem() { MenuID = 2, MenuName = "부모2", MenuDescription = "부모2입니다." };
        MenuItem child3 = new MenuItem() { MenuID = 13, MenuName = "자식3", MenuDescription = "자식3입니다." };
        MenuItem child4 = new MenuItem() { MenuID = 14, MenuName = "자식4", MenuDescription = "자식4입니다." };
        parent2.MenuItems = new List<MenuItem>() { child3, child4 };

        menus = new List<MenuItem>() { parent1, parent2 };
    }
}

메뉴를 위 처럼 구성하였고 대메뉴 2개에 자식 메뉴를 2개씩 구성하였습니다.

RadzenTreeLevel 에서 표시될 Text 를 TextProperty 에 정의하고 자식 노드를 ChildrenProperty 에 정의합니다.

HasChildren 으로 자식노드가 없는 경우 Expand 아이콘을 표시하지 않습니다.

 

결과