Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTreeList.ChildrenFieldName Property

Specifies the field name that stores the node’s child data items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public string ChildrenFieldName { get; set; }

#Property Value

Type Default Description
String null

The field name that stores children.

#Remarks

You can bind the TreeList component to hierarchical data structures that implement the IEnumerable interface. If each node in your data source includes a field with a list of child nodes, follow the steps below to populate the TreeList with data:

  1. Bind the Data parameter to a C# property.
  2. Populate this property with data in the OnInitialized or OnInitializedAsync lifecycle method.
  3. Assign the field name that stores children to the ChildrenFieldName property.

The following example binds the TreeList component to the SpaceObject collection. An object’s Satellites property stores child items.

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2"/>
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2">
            <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2">
            <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
}

Bind Blazor TreeList to Hierarchical Data

Run Demo: Hierarchical Data

Alternatively, you can populate the TreeList component with data during initialization. Refer to the following topic for more information: Bind Blazor TreeList to Data.

#Implements

See Also