Skip to main content
All docs
V24.1

DxTreeListColumn.FixedPosition Property

Allows you to anchor the column to the TreeList’s left or right edge.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(TreeListColumnFixedPosition.None)]
[Parameter]
public TreeListColumnFixedPosition FixedPosition { get; set; }

Property Value

Type Default Description
TreeListColumnFixedPosition None

An enumeration value.

Available values:

Name Description
None

The column moves when a user scrolls the TreeList horizontally.

Left

The column is anchored to the TreeList’s left edge and remains visible when a user scrolls the TreeList horizontally.

Right

The column is anchored to the TreeList’s right edge and remains visible when a user scrolls the TreeList horizontally.

Remarks

A TreeList component displays a horizontal scrollbar when the total width of all its columns exceeds the size of the component. Use a column’s FixedPosition property to freeze the column and keep it visible on screen while users scroll the TreeList horizontally.

The following code snippet anchors (fixes) the Name and Type columns to the TreeList’s left and right edges:

Fixed Columns

<DxTreeList @ref="TreeList"
            Data="Data"
            ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Width="200px"
                              FixedPosition="TreeListColumnFixedPosition.Left" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type"  Width="150px"
                              FixedPosition="TreeListColumnFixedPosition.Right" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" Width="150px" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" Width="150px" DisplayFormat="N2">
            <HeaderCaptionTemplate>Radius, km</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusByEarth" Caption="Radius, Ratio to Earth" Width="160px" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" Width="150px" DisplayFormat="N2">
            <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="VolumeRByEarth" Caption="Volume, Ratio to Earth" Width="160px" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="SurfaceGravity" Caption="Gravity" Width="150px" DisplayFormat="N2">
            <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="SurfaceGravityByEarth" Caption="Gravity, Ratio to Earth" Width="160px" DisplayFormat="N2" />
    </Columns>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    object Data { get; set; }
    protected override void OnInitialized () {
        Data = SpaceObjectDataProvider.GenerateData();
    }
}

Run Demo: Fixed (Anchored) Columns

Fixed Column Layout

The TreeList layout can include multiple zones with columns. The display order of zones is as follows:

  1. Columns fixed to the left edge.
  2. Regular columns.
  3. Columns fixed to the right edge.

In a zone, the TreeList displays columns based on their visible indexes in the following order:

  1. Columns with non-negative visible indexes. The smaller the index, the more to the left the TreeList displays the column.

  2. Columns with unset and negative visible indexes. The display order of these columns corresponds to the column order in the treelist markup.

Refer to the following section for more information about the TreeList layout: Column Layout Specifics.

Change a Fixed Position at Runtime

Implement custom UI elements to allow users to fix and unfix columns at runtime. The following code snippet changes the command column’s FixedPosition once a user changes the value of a combo box. In the example, fixed columns are colored gray for demonstration purposes.

Fixed Unfix Columns

<style>
    .my-treelist-class {
        width: 950px;
    }
    .my-combo-box-class {
        width: 200px;
    }
    .option-component {
        display: flex;
        align-items: center;
        margin-bottom: 0.35rem;
    }
</style>

<div class="option-component">
    <label for="combo-box" class="pe-2">Selection Column Fixed Position:</label>
    <DxComboBox Data="Enum.GetValues<TreeListColumnFixedPosition>()"
                CssClass="my-combo-box-class"
                Id="combo-box"
                Value="SelectionColumnFixedPosition"
                ValueChanged="(TreeListColumnFixedPosition newValue) => ChangeSelectionColumnFixedPosition(newValue)" />
</div>

<DxTreeList @ref="TreeList"
            Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            CssClass="my-treelist-class"
            CustomizeElement="OnCustomizeElement">
    <Columns>
        <DxTreeListSelectionColumn @ref="SelectionColumn" Width="150px" />
        <DxTreeListDataColumn FieldName="Name" Caption="Task" Width="400px" />
        <DxTreeListDataColumn FieldName="EmployeeName" Width="200px" />
        <DxTreeListDataColumn FieldName="StartDate" Width="150px" />
        <DxTreeListDataColumn FieldName="DueDate" Width="150px" />
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }
    ITreeList TreeList { get; set; }
    ITreeListSelectionColumn SelectionColumn { get; set; }
    TreeListColumnFixedPosition SelectionColumnFixedPosition { get; set; } = TreeListColumnFixedPosition.None;

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    void OnCustomizeElement(TreeListCustomizeElementEventArgs e) {
        if (e.ElementType == TreeListElementType.SelectionCell && e.Column.FixedPosition != TreeListColumnFixedPosition.None) {
            e.Style = "background-color: #efefef;";
        }
    }

    void ChangeSelectionColumnFixedPosition(TreeListColumnFixedPosition fixedPosition) {
        SelectionColumnFixedPosition = fixedPosition;
        TreeList.BeginUpdate();
        SelectionColumn.FixedPosition = SelectionColumnFixedPosition;
        TreeList.EndUpdate();
    }
}

Reorder Fixed Columns

When users move a column in the TreeList or Column Chooser, the TreeList component updates the column’s VisibleIndex property and reorders columns in the corresponding zone.

The TreeList prevents users from moving a column from one zone to another. For instance, users cannot place an unfixed column before columns anchored to the TreeList’s left edge.

Resize Fixed Columns

Set the TreeList’s ColumnResizeMode property to NextColumn or ColumnsContainer to allow users to change column widths. A column before a fixed column is not resizable. The image below demonstrates how users can resize columns in ColumnsContainer resize mode. Fixed columns on the image are colored gray for demonstration purposes.

Fixed Columns

In NextColumn resize mode, users cannot change the width of a zone at the expense of another zone. That is, users cannot drag borders that separate zones.

Implements

See Also