TreeListCustomizeElementEventArgs.VisibleIndex Property

Returns the visible index of the processed row or row that contains the processed cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public int VisibleIndex { get; }

Property Value

Type	Description
Int32	The visible index.

Remarks

Row Indexes

The TreeList component assigns indexes to visible nodes to indicate row order. Indexes are zero-based and sequential across all TreeList pages.

DxTreeList reassigns row indexes each time a user sorts or filters data and expands/collapses rows. Filtered-out rows and rows within collapsed nodes do not have indexes. In the following image, the TreeList component does not assign indexes to subtasks of the Create Action Plan… task.

Example

This following code sample highlights alternating (odd) rows with a different style to enhance readability:

Run Demo: Alternating Row Style

<DxTreeList Data="Data"
            KeyFieldName="ID"
            ParentKeyFieldName="RegionID"
            CustomizeElement="TreeList_CustomizeElement">
    <Columns>
        <DxTreeListDataColumn FieldName="Region" />
        <DxTreeListDataColumn FieldName="MarchSales" DisplayFormat="c0" />
        <DxTreeListDataColumn FieldName="SeptemberSales" DisplayFormat="c0" />
        <DxTreeListDataColumn FieldName="MarchChange" DisplayFormat="p2" />
        <DxTreeListDataColumn FieldName="SeptemberChange" DisplayFormat="p2" />
        <DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" />
    </Columns>
</DxTreeList>

@code {
    object Data { get; set; }

    protected override void OnInitialized () {
        Data = SalesByRegionDataProvider.GenerateData();
    }

    void TreeList_CustomizeElement(TreeListCustomizeElementEventArgs e) {
        if(e.ElementType == TreeListElementType.DataRow && e.VisibleIndex % 2 == 1) {
            e.CssClass = "alt-item";
        }
    }
}

.alt-item {
    --dxbl-grid-row-bg: var(--dxds-color-surface-neutral-subdued-rest);
}

For additional information and examples, refer to the CustomizeElement event’s description.