.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:
-
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; } }
-
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;
-
Handle the
CellTap
action as a command. First, create a class that inherits from theDataGridCommand
and set itsId
property accordingly. You will also need to override theCanExecute
andExecute
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); } }
-
Add this command to the
Commands
collection of theRadDataGrid
instance:grid.Commands.Add(new CellTapUserCommand());
-
Define the DataGrid in XAML:
<telerik:RadDataGrid x:Name="grid" ItemsSource="{Binding}"/>
-
Add the
telerik
namespace:xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
See Also
-