Tree component - how to display different types of children-nodes?

I'm trying to add a tree component, but struggling to make it work with the current model structure.


    public class Category
    {
        public int Id { get; set; }
        public string CategoryName { get; set; }
        public List<SubCategory> Subcategories { get; set; }
        public List<Category> Categories { get; set; }
	...
    }

    public class SubCategory
    {
        public int Id { get; set; }
        public string SubcategoryName { get; set; }
	...
    }

So, there's 2 models, Category and SubCategory, but every Parent model (Category) can contain both SubCategories, and Categories as children.

What I need is this:
image

However, I can only get one of the children-types to be displayed in a tree, and no deeper than 1 layer (red-marked nodes are not displayed) when using this code:

            <RadzenTree Style="width: 100%; height: 600px" Change=@OnChange Data=@categories @bind-Value=@selection>
                <RadzenTreeLevel TextProperty="CategoryName" ChildrenProperty="Categories" />
                <RadzenTreeLevel TextProperty="CategoryName" ChildrenProperty="Subcategories" />
                <RadzenTreeLevel TextProperty="SubcategoryName" HasChildren=@(subcategory => false) />
            </RadzenTree>

Is there a way to display a tree component like the one I need, with at least 2 different types of children, and several levels deep?

Hi @lulubtw,

The levels concept won't work in this case. Check our file system demo which shows how to implement a similar concept - the tree contains a mix of folders and files.

Thanks @korchev, I'll take a look.