GridDataColumnCellDisplayTemplateContext.VisibleIndex Property

Returns the visible index of the current row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

@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();
    }
}

WeatherForecast

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; }
}

WeatherForecastService

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();
    }
    // ...
}

Program.cs

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

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

<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:

• DxGrid.DataColumnCellDisplayTemplate
• DxGridDataColumn.CellDisplayTemplate