Skip to main content
All docs
V25.1
  • TreeListCustomizeElementEventArgs.VisibleIndex Property

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

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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%);
    }
    

    Alternating Row Style in Blazor TreeList

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

    See Also