DxTreeView.Data Property

Specifies a data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
IEnumerable

A data source.

Remarks

The TreeView component supports binding to data. In the bound mode, items from the data source automatically populate TreeView nodes.

Follow the steps below to bind TreeView to data:

  1. Use the Data property to specify a data source. You can use different data types:

    • Flat data - a collection of items that are available at one level.
    • Hierarchical data - a collection of nested nodes.
  2. Add the DataMappings tag to the component markup.

  3. Create the DxTreeViewDataMapping instance and map node properties (HasChildren, IconCssClass, and so on) to data source fields. Mappings are used to adjust the TreeView data model to the data source.

    • Flat data - the Key and ParentKey properties are required.

    • Hierarchical data - the Children property is required.

    You can also create multiple DxTreeViewDataMapping instances to specify different mappings for different node levels. Use the Level property to specify the node level for which data mappings are applied.

Flat Data

The code below binds the TreeView to the collection of flat data items. It specifies mappings for the Text, Key, and ParentKey properties.

    @if(Data == null) {
        <p><em>Loading...</em></p>
    }
    else {
        <div class="cw-320">
            <DxTreeView Data="@Data">
                <DataMappings>
                    <DxTreeViewDataMapping Text="Name"
                                           Key="Id"
                                           ParentKey="CategoryId" />
                </DataMappings>
            </DxTreeView>
        </div>
    }

    @code {
        List<FlatDataItem> Data { get; set; }

        protected override void OnInitialized() {
            IEnumerable<ProductFlat> products = ProductData.Products;
            IEnumerable<ProductCategory> productSubcategories = ProductData.Categories;

            Data = new List<FlatDataItem>(Enum.GetValues<ProductCategoryMain>().Select(i => new FlatDataItem() { Name = i.ToString(), Id = i }));
            Data.AddRange(products.Select(i => new FlatDataItem() { Name = i.ProductName, Id = i.Id, CategoryId = i.ProductCategoryId }));
            Data.AddRange(productSubcategories.Select(i => new FlatDataItem() { Name = i.Subcategory, Id = i.SubcategoryID, CategoryId = i.Category }));
        }
    }
</DemoPageSectionComponent>

Bind Treview to Flat Data

Run Demo: TreeView - Binding to Flat Data

Hierarchical Data

The code below binds the TreeView to the collection of ChemicalElementGroup objects. Each object can have child objects. The code specifies the Children and Text mappings to adjust the TreeView data model to the specified data source.

<DxTreeView Data="@ChemicalElements.Groups">
    <DataMappings>
        <DxTreeViewDataMapping Children="Groups"
                               Text="Name"/>
    </DataMappings>
</DxTreeView>

Bind Treview to Hierarchical Data

Run Demo: TreeView - Binding to Hierarchical Data

See Also