CellTap Command

The DataGrid CellTap Command handles the Tap gesture over a grid cell, that is, the intersection of a data row and a column.


Here is an example how the RadDataGrid CellTap Command works:

First, create the needed business objects, for example type Country with the following properties:

public class Data
    public string Country { get; set; }
    public string Capital { get; set; }

Then create a ViewModel with a collection of Data objects:

public class ViewModel
    public ViewModel()
        this.Items = new ObservableCollection<Data>()
            new Data { Country = "India", Capital = "New Delhi"},
            new Data { Country = "South Africa", Capital = "Cape Town"},
            new Data { Country = "Nigeria", Capital = "Abuja" },
            new Data { Country = "Singapore", Capital = "Singapore" }

    public ObservableCollection<Data> Items { get; set; }

Set the ViewModel class as BindingContext of the page:

this.BindingContext = new ViewModel();

Then handle the CellTap action as a Command. First, create a class that inherits from the DataGridCommand and set its Id property accordingly. You would also need to override 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 = $"CellTap Command on cell {context.Value} inside {context.Column.HeaderText} \n";
        Application.Current.MainPage.DisplayAlert("", "You've selected " + cellTap, "OK");
        this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.CellTap, parameter);

Then add this Command to the Commands collection of the RadDataGrid instance:

dataGrid.Commands.Add(new CellTapUserCommand());

Define the RadDataGrid in XAML:

<telerikDataGrid:RadDataGrid x:Name="dataGrid" 
                             ItemsSource="{Binding Items}"/>

See Also

In this article
Not finding the help you need?