New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid CellTap Command

The DataGrid CellTap command handles the tap (click) gesture over a grid cell, that is, the intersection of a data row and a column.

Example

Here is an example how the RadDataGrid CellTap command works:

  1. Create the needed business objects, for example, type Country with the following properties:

    public class Country
    {
    public Country(string name, double population)
    {
        this.Name = name;
        this.Population = population;
    }
    
    public string Name { get; set; }
    public double Population { get; set; }
    }
    
  2. Add data to the DataGrid ItemsSource and set the Bindingcontext:

    var source = new ObservableCollection<Country>();
    source.Add(new Country("Mozambique", 24692000));
    source.Add(new Country("Paraguay", 6725000));
    source.Add(new Country("Turkmenistan", 5663000));
    source.Add(new Country("Mongolia", 3027000));
    source.Add(new Country("Japan", 127000000));
    source.Add(new Country("Bulgaria", 7128000));
    source.Add(new Country("Chad", 14450000));
    source.Add(new Country("Netherlands", 17020000));
    
    
    

    this.BindingContext = source;

    1. Handle the CellTap action as a command. First, create a class that inherits from the DataGridCommand and set its Id property accordingly. You will also need to override the CanExecute and Execute methods as demonstrated in the example below:

      public class CellTapUserCommand : DataGridCommand
      {
      public CellTapUserCommand()
      {
          Id = DataGridCommandId.CellTap;
      }
      public override bool CanExecute(object parameter)
      {
          return true;
      }
      public override void Execute(object parameter)
      {
          var context = parameter as DataGridCellInfo;
          var cellTap =  $"You tapped on {context.Value} inside {context.Column.HeaderText} column \n";
          Application.Current.MainPage.DisplayAlert("CellTap Command: ", cellTap, "OK");
          this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.CellTap, parameter);
      }
      }
      
    2. Add this command to the Commands collection of the RadDataGrid instance:

      grid.Commands.Add(new CellTapUserCommand());
      
    3. Define the DataGrid in XAML:

      <telerik:RadDataGrid x:Name="grid" ItemsSource="{Binding}"/>
      
    4. Add the telerik namespace:

      xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
      

      See Also

In this article
Not finding the help you need?