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.

Example

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?