GridCustomizeElementEventArgs.VisibleIndex Property

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 index.

Remarks

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

Run Demo: Alternating Row Style

<DxGrid @ref="Grid" Data="@Data" CustomizeElement="Grid_CustomizeElement">
    <Columns> ... </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    IGrid Grid { get; set; }

    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DataRow && e.VisibleIndex % 2 == 1) {
            e.CssClass = "alt-item";
        }
        if(e.ElementType == GridElementType.HeaderCell) {
            e.Style = "background-color: rgba(0, 0, 0, 0.08)";
            e.CssClass = "header-bold";
        }
    }
}

.alt-item {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}
.alt-item > td {
    --dxbl-grid-bg: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}
.header-bold span {
    font-weight: 700;
}

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