TreeListCustomizeElementEventArgs.VisibleIndex Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public int VisibleIndex { get; }

Property Value

Type	Description
Int32	The visible index.

Remarks

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 {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}

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