Skip to main content
All docs
V24.1

DxTreeListColumn.VisibleIndex Property

Specifies a column’s position among other columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(-1)]
[Parameter]
public int VisibleIndex { get; set; }

Property Value

Type Default Description
Int32 -1

The column’s visible index.

Remarks

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.

Note

A column’s Visible and FixedPosition properties do not affect the column’s VisibleIndex property value.

The following code snippet sets the column’s order:

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            @bind-SelectedDataItems="@SelectedDataItems">
    <Columns>
        <DxTreeListDataColumn FieldName="EmployeeName" VisibleIndex="2" />
        <DxTreeListDataColumn FieldName="Name" VisibleIndex="1" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
        <DxTreeListSelectionColumn VisibleIndex="0" Width="50"/>
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
}

Blazor TreeList Column Visible Index

When a user moves a column in the TreeList or Column Chooser, the TreeList component updates the column’s VisibleIndex property and reorders columns. Handle a column’s VisibleIndexChanged event to respond to column position changes.

Call the TreeList’s GetVisibleColumns() method to get a collection of visible columns sorted based on their display order. To get a collection of all columns, call the GetColumns() method.

See Also