Select Cell on Double Tap
Environment
Product Version | 5.2.0 |
Product | DataGrid for MAUI |
Description
This how-to article describes how to select a cell by using the double click, double tap gesture.
Solution
For this purpose we will execute the CellTap
command on CellDoubleTap
command. So when the user of the application double tapped or double-click on the cell, the item will be selected.
Here is an example how to execute the CellTap
command in CellDoubleTap
command.
1. Create the needed business objects, for example, the Country
type 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;
3. Handle the CellDoubleTap
action as a command:
3.1. First, create a class that inherits from the DataGridCommand
and set its Id
property.
3.2. Override the CanExecute
and Execute
methods as demonstrated in the example below.
public class CellDoubleTapUserCommand : DataGridCommand
{
public CellDoubleTapUserCommand()
{
Id = DataGridCommandId.CellDoubleTap;
}
public override void Execute(object parameter)
{
this.Owner.CommandService.ExecuteDefaultCommand(DataGridCommandId.CellTap, parameter);
}
}
4. Handle the CellTap
action as a command, so when you double click on the cell, to not be in edit mode.
public class CellTapUserCommand : DataGridCommand
{
public CellTapUserCommand()
{
Id = DataGridCommandId.CellTap;
}
public override void Execute(object parameter)
{
}
}
5. Add the CellDoubleTapUserCommand
command to the Commands
collection of the RadDataGrid
instance:
grid.Commands.Add(new CellDoubleTapUserCommand());
6. Define the DataGrid in XAML:
<telerik:RadDataGrid x:Name="grid" ItemsSource="{Binding}"/>
7. Add the telerik
namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"