GridColumnCellDisplayTemplateContext.VisibleIndex Property

Returns the visible index of the current row.

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 row’s visible index.

Remarks

The Grid component assigns indexes to visible data and group rows to indicate row order. Indexes are zero-based and sequential across all Grid pages.

DxGrid reassigns row indexes each time users sort, filter, group data, or expand or collapse group rows. Filtered-out rows and rows in collapsed groups do not have indexes. In the following image, the Grid component does not assign indexes to data rows in the collapsed Partly cloudy group.

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

Template Examples

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

• DxGrid.DataColumnCellDisplayTemplate
• DxGridDataColumn.CellDisplayTemplate
• DxGridCommandColumn.CellDisplayTemplate
• DxGridSelectionColumn.CellDisplayTemplate