DxTreeView.Data Property

Specifies a data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public IEnumerable Data { get; set; }

Property Value

Type	Description
IEnumerable	A data source.

Remarks

The DxTreeView component supports binding to hierarchical data structures. A bound DxTreeView creates a node for each data item.

Use the Data option to specify a data source.

Note

To bind DxTreeView to a hierarchical data structure you should specify the Data and ChildrenExpression properties.

Razor

<DxTreeView Data="@ChemicalElements.Groups"
    TextExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Name)"
    ChildrenExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Groups)">
</DxTreeView>

Data Source

public class ChemicalElementGroup { 
    Lazy<List<ChemicalElementGroup>> groups = new Lazy<List<ChemicalElementGroup>>();

    public ChemicalElementGroup(string name, List<ChemicalElementGroup> groups = null) {
        Name = name;
        if (groups != null)
            Groups.AddRange(groups);
    }

    public string Name { get; set; }

    public List<ChemicalElementGroup> Groups { get { return groups.Value; } }
}

public static class ChemicalElements {
    private static readonly Lazy<List<ChemicalElementGroup>> chemicalElementGroups = new Lazy<List<ChemicalElementGroup>>(() => {
        List<ChemicalElementGroup> groups = new List<ChemicalElementGroup>() {
            new ChemicalElementGroup("Metals", new List<ChemicalElementGroup>() {
                new ChemicalElementGroup("Alkali metals"),
                new ChemicalElementGroup("Alkaline earth metals"),
                new ChemicalElementGroup("Inner transition elements", new List<ChemicalElementGroup>() {
                    new ChemicalElementGroup("Lanthanides"),
                    new ChemicalElementGroup("Actinides")
                }),
                new ChemicalElementGroup("Transition elements"),
                new ChemicalElementGroup("Other metals")
            }),
            new ChemicalElementGroup("Metalloids"),
            new ChemicalElementGroup("Nonmetals", new List<ChemicalElementGroup>() {
                new ChemicalElementGroup("Halogens"),
                new ChemicalElementGroup("Noble gases"),
                new ChemicalElementGroup("Other nonmetals")
            })
        };
        return groups;
    });

    public static List<ChemicalElementGroup> Groups { get { return chemicalElementGroups.Value; } }
}

Online Demo

TreeView - Bind to Hierarchical Data