DxGrid.RowClick Event

Fires when a user clicks or taps a grid row or focuses a data cell and presses Enter.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<GridRowClickEventArgs> RowClick { get; set; }

Parameters

Type	Description
GridRowClickEventArgs	A GridRowClickEventArgs object that contains data for this event.

Remarks

The Grid component raises the RowClick event in response to the following actions:

• A user clicks a data or group row with a pointing device.
• A user focuses a data cell in display mode and presses Enter.

The InputDevice event argument determines which action triggered the event. Use Column and VisibleIndex arguments to determine the position of the processed cell. The Grid argument allows you to access the Grid and its extensive API.

The following code snippet displays the following information about the clicked row:

• The row’s visible index
• The date that corresponds to the row

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data"
        RowClick="OnRowClick">
    <Columns>
        <DxGridDataColumn FieldName="Date" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
    </Columns>
</DxGrid>

@Alert

@code {
    public string Alert { get; set; } = "";
    object Data { get; set; }

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

    void OnRowClick(GridRowClickEventArgs e) {
        Alert = $"Clicked row index: {e.VisibleIndex}. Corresponding date: '{e.Grid.GetRowValue(e.VisibleIndex, "Date")}'";
    }
}

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 enable the AllowSelectRowByClick property to allow users to select rows by mouse clicks, tap gestures, and keyboard shortcuts. Shift+Click selects a range of rows. Ctrl+Click toggles the selected state for an individual row. When you handle the RowClick event, use ShiftKey and CtrlKey arguments to determine whether the user held down the Shift or Ctrl key.

Limitations

The RowClick event does not fire in the following cases:

• A user focuses a data cell that contains nested focusable objects (links, buttons, editors, etc.) and presses Enter.
• A user clicks or taps indent cells displayed to the left of grouped data rows.
• A user clicks or taps empty space displayed to the right of the Grid component. This space appears when the total width of all columns is less than the component width.