Skip to main content
All docs
V25.1
  • DxTreeList.ChildrenFieldName Property

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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