Grid Events in MAUI DataGrid (SfDataGrid)

Cell Tap Events

The 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 will be triggered while tapping a cell in the DataGrid. This event has the DataGridCellTappedEventArgs as arguments.

<syncfusion:SfDataGrid x:Name="dataGrid"
                   CellTapped="dataGrid_CellTapped"
                   ItemsSource="{Binding OrderInfoCollection}" />
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 OrderInfoCollection}" />
Command TapCommand = new Command(ListenTapCommand);

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 will be triggered while double tapping a cell in the DataGrid. This event has the DataGridCellDoubleTappedEventArgs as arguments.

<syncfusion:SfDataGrid x:Name="dataGrid"
                   CellDoubleTapped="dataGrid_CellDoubleTapped"
                   ItemsSource="{Binding OrderInfoCollection}" />
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 OrderInfoCollection}" />
Command DoubleTapCommand = new Command(ListenDoubleTapCommand);

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 will be triggered while long pressing a cell in the DataGrid. This event has the DataGridCellLongPressEventArgs as arguments.

<syncfusion:SfDataGrid x:Name="dataGrid"
                   CellLongPress="dataGrid_CellLongPress"
                   ItemsSource="{Binding OrderInfoCollection}" />
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 OrderInfoCollection}" />
Command LongPressCommand = new Command(ListenLongPressCommand);

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 will be triggered when a right-click mouse gesture is recognized on a cell. This event has the DataGridCellRightTappedEventArgs as arguments.

<syncfusion:SfDataGrid x:Name="dataGrid"
                   CellRightTapped="SfDataGrid_CellRightTapped"
                   ItemsSource="{Binding OrderInfoCollection}" />
private void SfDataGrid_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;
}

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 OrderInfoCollection}" />
Command RightTapCommand = new Command(ListenRightTapCommand);

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.

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

CellEntered event

This event will be 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 OrderInfoCollection}" />
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 OrderInfoCollection}" />
Command EnteredCommand = new Command(ListenEnteredCommand);

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

This event will be triggered when the mouse pointer hovers over a cell in the DataGrid. It uses DataGridCellHoveredEventArgs as its argument.

<syncfusion:SfDataGrid x:Name="dataGrid"
                   CellHovered="dataGrid_CellHovered"
                   ItemsSource="{Binding OrderInfoCollection}" />
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;
}

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 OrderInfoCollection}" />
Command HoveredCommand = new Command(ListenHoveredCommand);

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 will be 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 OrderInfoCollection}" />
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 OrderInfoCollection}" />
Command ExitedCommand = new Command(ListenExitedCommand);

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 will be triggered whenever the current cell’s value has been changed in the DataGridTextColumn, DataGridNumericColumn, DataGridDateColumn, DataGridComboBoxColumn 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.
dataGrid.CellValueChanged += SfDataGrid_CellValueChanged;

private void SfDataGrid_CellValueChanged(object sender, ValueChangedEventArgs e)
{
    var column = e.Column;
    var newValue = e.NewValue;
    var rowColIndex = e.RowColIndex;
    var rowData = e.RowData;
}

DataGridLoaded

This event will be triggered once components in the SfDataGrid initialized and rendered.

dataGrid.DataGridLoaded += DataGrid_GridLoaded;

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

}

ViewCreated

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

dataGrid.ViewCreated += DataGrid_viewCreated;     
 
private void DataGrid_viewCreated(object? sender, EventArgs e)
{
           
}

ItemsSourceChanged

This event will be triggered once the source is changed in SfDataGrid

dataGrid.ItemsSourceChanged += DataGrid_DataGridItemsSourceChanged;

private void DataGrid_DataGridItemsSourceChanged(object? sender, DataGridItemsSourceChangedEventArgs e)
{
    var newItemSource = e.NewItemSource;
    var oldItemSource = e.OldItemSource;
    var newView = e.NewView;
    var oldView = e.OldView;
}