GridCustomizeElementEventArgs.VisibleIndex Property

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 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.CssClass = "header-bold";
        }
    }
}

.alt-item {
    --dxbl-grid-row-bg: var(--dxds-color-surface-neutral-subdued-rest);
}
.header-bold span {
    font-weight: 700;
    color: #161616;
}

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