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

    Allows you to add TreeList columns.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment Columns { get; set; }

    Property Value

    Type Description
    RenderFragment

    Column markup.

    Remarks

    The TreeList supports the following column types:

    Data Column
    This column obtains its value from the bound data source. Use the Data property to bind the TreeList to a data collection. Declare DxTreeListDataColumn objects in the Columns template and use each object’s FieldName property to assign data fields. Note that the FieldName property value must be unique for each data column.
    Selection Column
    This column allows users to select and deselect rows. It contains checkboxes or radio buttons depending on selection mode. To create this column, declare a DxTreeListSelectionColumn object in the Columns template.
    Command Column
    This column displays CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row. To create this column, declare a DxTreeListCommandColumn object in the Columns template.
    Band Column
    This column allows you to combine columns into logical groups called bands. To create such a group, declare a DxTreeListBandColumn object in the Columns template and specify child columns in the Columns collections.

    For more information, refer to the following topic: Columns in Blazor TreeList.

    The following example creates data columns and binds them to data fields from the assigned data collection:

    @inject EmployeeTaskService EmployeeTaskService
    
    <DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" Caption="Task" />
            <DxTreeListDataColumn FieldName="EmployeeName" />
            <DxTreeListDataColumn FieldName="StartDate" />
            <DxTreeListDataColumn FieldName="DueDate" />
        </Columns>
    </DxTreeList>
    
    @code {
        List<EmployeeTask> TreeListData { get; set; }
    
        protected override void OnInitialized() {
            TreeListData = EmployeeTaskService.GenerateData();
        }
    }
    

    Bind Blazor TreeList to Flat Data

    See Also