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:
In a zone, the TreeList displays columns based on their visible indexes
in the following order:
Columns with non-negative visible indexes. The smaller the index, the more to the left the TreeList displays the column.
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();
}
}
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.