DxGrid.RowClick Event

Fires when a user clicks a grid row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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

You can use the RowClick event to handle clicks on grid rows (data or group rows). Use the GridRowClickEventArgs event arguments (Column, VisibleIndex, and so on) to access a clicked row and other grid data.

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 = $"The row {e.VisibleIndex} has been clicked. The row value is '{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>();

The Grid also allows users to click rows to select them. To enable row selection, set the AllowSelectRowByClick property to true. To select a range of rows, users should hold down the Shift key and click the first and last rows in the range. To add/remove a row to/from selection, users should hold down the Ctrl key and click the row.

<DxGrid Data="@DataSource"
        RowClick="OnRowClick"
        AllowSelectRowByClick="true"
        ...>
    @*...*@
</DxGrid>

You can use the GridRowClickEventArgs.ShiftKey and GridRowClickEventArgs.CtrlKey event arguments to define whether the Shift or Ctrl key was pressed when a user clicked rows.

Note

The RowClick event does not fire in the following cases:

• When a user clicks on empty space displayed to the right of the grid. This space appears when the total width of all columns is less than the component width.
• When a user clicks on indent cells displayed to the left of grouped data rows.