Grid Events in MAUI DataGrid (SfDataGrid)

9 Jul 202624 minutes to read

Cell Tap Events

The .NET MAUI DataGrid provides the following events for handling interactions with the cells.

  • CellTapped : Called when a tap on a cell has occurred.
  • CellDoubleTapped : Called when the user has tapped a cell with a primary button at the same cell twice in quick succession.
  • CellLongPress : Called when a long-press gesture with a primary button has been recognized for a cell.
  • CellRightTapped : Called when a right-click mouse gesture has been recognized on a cell.

CellTapped event

This event is triggered when a user taps a cell in the DataGrid. This event has the DataGridCellTappedEventArgs as arguments.

Platform availability: Android, iOS, macOS, Windows

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellTapped="dataGrid_CellTapped"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellTapped += dataGrid_CellTapped;
    this.Content = dataGrid;
}

private void dataGrid_CellTapped(object? sender, DataGridCellTappedEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
}

CellTappedCommand

The CellTappedCommand will be invoked while tapping a cell in the SfDataGrid. The instance of DataGridCellTappedEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellTappedCommandParameter property.

<syncfusion:SfDataGrid CellTappedCommand="{Binding TapCommand}"
                       ItemsSource="{Binding Orders}" />
Command TapCommand = new Command(ListenTapCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellTappedCommand = TapCommand;
    this.Content = dataGrid;
}

private static void ListenTapCommand(object obj)
{
    var args = obj as DataGridCellTappedEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellDoubleTapped event

This event is triggered when a user double-taps a cell in the DataGrid. This event has the DataGridCellDoubleTappedEventArgs as arguments.

Platform availability: Android, iOS, macOS, Windows

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellDoubleTapped="dataGrid_CellDoubleTapped"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellDoubleTapped += dataGrid_CellDoubleTapped;
    this.Content = dataGrid;
}

private void dataGrid_CellDoubleTapped(object? sender, DataGridCellDoubleTappedEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
}

CellDoubleTappedCommand

The CellDoubleTappedCommand will be invoked while double tapping a cell in the SfDataGrid. The instance of DataGridCellDoubleTappedEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellDoubleTappedCommandParameter property.

<syncfusion:SfDataGrid CellDoubleTappedCommand="{Binding DoubleTapCommand}"
                       ItemsSource="{Binding Orders}" />
Command DoubleTapCommand = new Command(ListenDoubleTapCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellDoubleTappedCommand = DoubleTapCommand;
    this.Content = dataGrid;
}

private static void ListenDoubleTapCommand(object obj)
{
    var args = obj as DataGridCellDoubleTappedEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellLongPress event

This event is triggered when a long-press gesture is recognized on a cell in the DataGrid. This event has the DataGridCellLongPressEventArgs as arguments.

Platform availability: Android, iOS, macOS, Windows

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellLongPress="dataGrid_CellLongPress"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellLongPress += dataGrid_CellLongPress;
    this.Content = dataGrid;
}

private void dataGrid_CellLongPress(object? sender, DataGridCellLongPressEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
}

CellLongPressCommand

The CellLongPressCommand will be invoked while long-pressing a cell in the SfDataGrid. The instance of DataGridCellLongPressEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellLongPressCommandParameter property.

<syncfusion:SfDataGrid CellLongPressCommand="{Binding LongPressCommand}"
                       ItemsSource="{Binding Orders}" />
Command LongPressCommand = new Command(ListenLongPressCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellLongPressCommand = LongPressCommand;
    this.Content = dataGrid;
}

private static void ListenLongPressCommand(object obj)
{
    var args = obj as DataGridCellLongPressEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellRightTapped event

This event is triggered when a right-click mouse gesture is recognized on a cell. This event has the DataGridCellRightTappedEventArgs as arguments.

Platform availability: Windows, macOS

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellRightTapped="dataGrid_CellRightTapped"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellRightTapped += dataGrid_CellRightTapped;
    this.Content = dataGrid;
}

private void dataGrid_CellRightTapped(object sender, DataGridCellRightTappedEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
    var pointerDeviceType = e.PointerDeviceType; // PointerDeviceType: Mouse, Pen, Touch
}

NOTE

The CellRightTapped event is only applicable for Windows and macOS.

CellRightTappedCommand

The CellRightTappedCommand will be invoked when a right-click mouse gesture is recognized on a cell in the SfDataGrid. The instance of DataGridCellRightTappedEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellRightTappedCommandParameter property.

<syncfusion:SfDataGrid CellRightTappedCommand="{Binding RightTapCommand}"
                       ItemsSource="{Binding Orders}" />
Command RightTapCommand = new Command(ListenRightTapCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellRightTappedCommand = RightTapCommand;
    this.Content = dataGrid;
}

private static void ListenRightTapCommand(object obj)
{
    var args = obj as DataGridCellRightTappedEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

Cell Pointer Events

The DataGrid provides the following events for handling mouse pointer interactions with the cells. These events are only triggered on platforms that support mouse input.

  • CellEntered : Triggered when the mouse pointer enters a cell.
  • CellHovered : Triggered when the mouse pointer hovers over a cell.
  • CellExited : Triggered when the mouse pointer exits a cell.

Platform availability: Windows, macOS

CellEntered event

This event is triggered when the mouse pointer enters a cell in the DataGrid. It uses DataGridCellEnteredEventArgs as its argument.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellEntered="dataGrid_CellEntered"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellEntered += dataGrid_CellEntered;
    this.Content = dataGrid;
}

private void dataGrid_CellEntered(object sender, DataGridCellEnteredEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
}

CellEnteredCommand

The CellEnteredCommand will be invoked when the mouse pointer enters a cell in the SfDataGrid. The instance of DataGridCellEnteredEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellEnteredCommandParameter property.

<syncfusion:SfDataGrid CellEnteredCommand="{Binding EnteredCommand}"
                       ItemsSource="{Binding Orders}" />
Command EnteredCommand = new Command(ListenEnteredCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellEnteredCommand = EnteredCommand;
    this.Content = dataGrid;
}

private static void ListenEnteredCommand(object obj)
{
    var args = obj as DataGridCellEnteredEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellHovered event

The CellHovered event is triggered when the mouse pointer hovers over a cell in the DataGrid. This event uses the DataGridCellHoveredEventArgs class as its argument.

The DataGridCellHoveredEventArgs object exposes the following properties:

Property Description
RowColumnIndex Gets the row and column index of the hovered cell.
RowData Gets the underlying data object for the row that contains the hovered cell.
Column Gets the column associated with the hovered cell.
Point Gets the location (coordinates) of the hovered cell.
CellValue Gets the value contained in the hovered cell.
CellType Gets the type of the hovered cell. 
<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellHovered="dataGrid_CellHovered"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellHovered += dataGrid_CellHovered;
    this.Content = dataGrid;
}

private void dataGrid_CellHovered(object sender, DataGridCellHoveredEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
    var point = e.Point;
    var cellValue = e.CellValue;
    var cellType = e.CellType;
}

CellHoveredCommand

The CellHoveredCommand will be invoked when the mouse pointer hovers over a cell in the SfDataGrid. The instance of DataGridCellHoveredEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellHoveredCommandParameter property.

<syncfusion:SfDataGrid CellHoveredCommand="{Binding HoveredCommand}"
                       ItemsSource="{Binding Orders}" />
Command HoveredCommand = new Command(ListenHoveredCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellHoveredCommand = HoveredCommand;
    this.Content = dataGrid;
}

private static void ListenHoveredCommand(object obj)
{
    var args = obj as DataGridCellHoveredEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellExited event

This event is triggered when the mouse pointer exits a cell in the DataGrid. It uses DataGridCellExitedEventArgs as its argument.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellExited="dataGrid_CellExited"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellExited += dataGrid_CellExited;
    this.Content = dataGrid;
}

private void dataGrid_CellExited(object sender, DataGridCellExitedEventArgs e)
{
    var rowIndex = e.RowColumnIndex.RowIndex;
    var rowData = e.RowData;
    var columnIndex = e.RowColumnIndex.ColumnIndex;
    var column = e.Column;
}

CellExitedCommand

The CellExitedCommand will be invoked when the mouse pointer exits a cell in the SfDataGrid. The instance of DataGridCellExitedEventArgs will be passed as the default value of the command’s parameter. It can be customized by setting the CellExitedCommandParameter property.

<syncfusion:SfDataGrid CellExitedCommand="{Binding ExitedCommand}"
                       ItemsSource="{Binding Orders}" />
Command ExitedCommand = new Command(ListenExitedCommand);

public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellExitedCommand = ExitedCommand;
    this.Content = dataGrid;
}

private static void ListenExitedCommand(object obj)
{
    var args = obj as DataGridCellExitedEventArgs;
    if (args != null)
    {
        var rowIndex = args.RowColumnIndex.RowIndex;
        var rowData = args.RowData;
        var columnIndex = args.RowColumnIndex.ColumnIndex;
        var column = args.Column;
    }
}

CellValueChanged event

The SfDataGrid.CellValueChanged event is triggered when a cell’s value is edited and committed in the DataGridTextColumn, DataGridNumericColumn, DataGridDateColumn, DataGridComboBoxColumn, DataGridPickerColumn, or DataGridCheckBoxColumn. This event handler contains the parameter of type DataGridCellValueChangedEventArgs that contains the following properties.

  • Column : Gets the current DataGridColumn that contains the grid cell for which value is edited or changed.
  • NewValue : The newly edited value to be committed.
  • RowColumnIndex : The current RowColumnIndex of the grid cell undergoing the value change.
  • RowData : The RowData of the row that contains the grid cell undergoing the value change.
  • CellValue : The initial value when current cell entered edit mode.
<syncfusion:SfDataGrid x:Name="dataGrid"
                       CellValueChanged="dataGrid_CellValueChanged"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.CellValueChanged += dataGrid_CellValueChanged;
    this.Content = dataGrid;
}

private void dataGrid_CellValueChanged(object sender, DataGridCellValueChangedEventArgs e)
{
    var column = e.Column;
    var newValue = e.NewValue;
    var rowColIndex = e.RowColumnIndex;
    var rowData = e.RowData;
}

DataGridLoaded

This event is triggered once all components in the SfDataGrid have been initialized and rendered.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       DataGridLoaded="dataGrid_GridLoaded"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.DataGridLoaded += dataGrid_GridLoaded;
    this.Content = dataGrid;
}

private void dataGrid_GridLoaded(object? sender, EventArgs e)
{

}

ViewCreated

This event is triggered once the SfDataGrid.View is created.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ViewCreated="DataGrid_viewCreated"
                       ItemsSource="{Binding Orders}" />
private void DataGrid_viewCreated(object? sender, EventArgs e)
{
           
}

ItemsSourceChanged

This event is triggered when the ItemsSource of the DataGrid is changed.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSourceChanged="dataGridItemsSourceChanged"
                       ItemsSource="{Binding Orders}" />
public MainPage()
{
    InitializeComponent();
    SfDataGrid dataGrid = new SfDataGrid();
    OrderInfoViewModel viewModel = new OrderInfoViewModel();
    dataGrid.ItemsSource = viewModel.Orders;
    dataGrid.ItemsSourceChanged += dataGridItemsSourceChanged;
    this.Content = dataGrid;
}

private void dataGridItemsSourceChanged(object? sender, DataGridItemsSourceChangedEventArgs e)
{
    var newItemSource = e.NewItems;
    var oldItemSource = e.OldItems;
    var newView = e.NewView;
    var oldView = e.OldView;
}