GridDataColumnCellDisplayTemplateContext.VisibleIndex Property

Returns the visible index of the current row.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public int VisibleIndex { get; }

Property Value

Type	Description
Int32

The row’s visible index.

Remarks

Row Visible Indexes

Visible indexes indicate the order of visible data rows and group rows. Indexes are zero-based and sequential for rows on all grid pages.

The Grid re-assigns row indexes each time when users sort, filter, group data, and expand/collapse group rows.

The following rows do not have visible indexes:

Rows that are filtered out.
Rows in collapsed groups.

The following code snippet does the following:

Creates a grid column that displays visible indexes for data rows. It uses the CellDisplayTemplate property to specify the column content.
Uses the DataColumnGroupRowTemplate property to display visible indexes for group rows.
Razor
WeatherForecast
WeatherForecastService
Program.cs

razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn Caption="Visible Index">
            <CellDisplayTemplate>@context.VisibleIndex</CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Date"
                          DisplayFormat="D" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
        <DxGridDataColumn FieldName="TemperatureC"
                          Caption="Temperature" />
    </Columns>
    <DataColumnGroupRowTemplate>
        @context.DisplayText (Visible Index = @context.VisibleIndex)
    </DataColumnGroupRowTemplate>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

csharp

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

csharp

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    private static string[] CloudCover = new[] {
        "Sunny", "Partly cloudy", "Cloudy", "Storm"
    };

    Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
        Tuple.Create( 22 , "Hot"),
        Tuple.Create( 13 , "Warm"),
        Tuple.Create( 0 , "Cold"),
        Tuple.Create( -10 , "Freezing")
    };

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 15).Select(index => {
            var temperatureC = rng.Next(-10, 30);
            return new WeatherForecast {
                Date = startDate.AddDays(index),               
                TemperatureC = temperatureC,
                CloudCover = CloudCover[rng.Next(0, 4)],
                Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
            };
        }).ToList();
    }

    public IEnumerable<WeatherForecast> GetForecast() {
        return Forecast.ToArray();
    }
    // ...
}

csharp

// ...
builder.Services.AddSingleton<WeatherForecastService>();

You can use the IsGroupRow(Int32) method to determine if this is a data or group row:

razor

<DxGrid @ref="Grid"
        Data="@Data"
        ShowGroupPanel="true">
    <Columns>
        <DxGridDataColumn FieldName="ContactName" MinWidth="100" />
        <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
        <DxGridDataColumn FieldName="City" Width="10%" />
        <DxGridDataColumn FieldName="Region" Width="10%" />
        <DxGridDataColumn FieldName="Country" GroupIndex="0" Width="10%" />
    </Columns>
    <DataColumnGroupRowTemplate>
        @context.DisplayText (Is Group Row = @Grid.IsGroupRow(context.VisibleIndex))
    </DataColumnGroupRowTemplate>
</DxGrid>

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

Refer to the following property descriptions for additional information and examples: