DropDownTree Binding to Hierarchical Data
This article explains how to bind the DropDownTree for Blazor to hierarchical data. Before continuing, make sure you are familiar with the DropDownTree data binding basics.
Hierarchical data means that the child items exist in a property of the parent item. By default, the DropDownTree expects this property to be called Items, otherwise set the property name in the ItemsField parameter.
The DropDownTree renders an expand icon for all items that:
- Have a non-
nullchild items collection. - Have a
HasChildrenmodel property and its value istrue. If aHasChildrenproperty exists, it takes precedence over the child items collection.
Hierarchical data binding allows you to have different model types at each DropDownTree level. Note that the data binding settings are per level, so a certain level always uses the same bindings, regardless of the model they represent and their parent.
Same Model Type on All Levels
The following example uses default property names in the model, so there is no need to set field parameters in the DropDownTree configuration.
Bind DropDownTree to hierarchical data with the same model type on all levels
Different Type at Each Level
The example below uses two levels of hierarchy, but the same idea applies to any number of levels. You will likely need a separate TreeViewBinding tag for each level with its own field name configuration.
Bind DropDownTree to hierarchical data with a different model type at each level