Selection in .NET MAUI DataGrid

The DataGrid exposes a selection feature which enables users to select a cell or a row by clicking (tapping) on it. To cancel the selection, users can click the cell or the row again. The control provides a single and multiple selection feature.

This article explains the basic properties and methods that the DataGrid provides for working with selection.

Important Properties

The DataGrid supports different selection modes that you can modify through the SelectionUnit and SelectedItems properties. Before you can set the SelectionMode, you must choose which Unit can be selected.

SelectionUnit

The SelectionUnit property (of type Telerik.Maui.Controls.Compatibility.DataGrid.DataGridSelectionUnit) allows you to control which Unit can be selected:

• (Default) Row—The unit to select is a grid row.
• Cell—The unit to select is a cell within a grid row.

To define a cell when using a selection, you can utilize the DataGridCellInfo class that holds all the information about the cell. To define a row when using a selection, you can use your data object.

The example below shows how to set SelectionUnit in XAML and code-behind:

<telerik:RadDataGrid x:Name="dataGrid"
                     SelectionUnit="Cell" />

var dataGrid = new RadDataGrid();
dataGrid.SelectionUnit = Telerik.Maui.Controls.Compatibility.DataGrid.DataGridSelectionUnit.Cell;

SelectionMode

The SelectionMode property (of type Telerik.Maui.Controls.Compatibility.DataGrid.DataGridSelectionMode) provides the following modes:

• (Default) Single—A single unit may be selected.
• Multiple—Multiple units may be selected.
• None—No selection is allowed.

The example below shows how to set SelectionMode in XAML and code-behind:

<telerik:RadDataGrid x:Name="dataGrid"
                     SelectionMode="Multiple" />

var dataGrid = new RadDataGrid();
dataGrid.SelectionMode = Telerik.Maui.Controls.Compatibility.DataGrid.DataGridSelectionMode.Multiple;

SelectedItem/SelectedItems

DataGrid exposes SelectedItem and SelectedItems properties which you can use depending on whether you have Single or Multiple SelectionMode. Once you make a selection, you can get or modify the collection with the selected items by using the SelectedItems property of type ObservableCollection<object>. It gets or modifies an ObservableCollection of the currently selected items. Their type depends on the applied SelectionUnit, that is, DataGridCellInfo for a cell and a data item for a row.

You can listen to the CollectionChanged event of the SelectedItems directly.

The SelectedItem property gets or sets the value of the selected item in the DataGrid. The type of SelectedItem depends on the value of SelectedUnit.

• Row— SelectedItem is of type DataGridCellInfo.
• Cell— SelectedItem is the same type as the business object.

Events

• SelectionChanged—An event that is triggered whenever the SelectedItems collection is changed. The SelectionChanged event handler receives two parameters:
  • The sender argument, which is of type object, but can be cast to the RadDataGrid type.
  • A DataGridSelectionChangedEventArgs object, which provides the following properties:
    • RemovedItems—Gets a list of the removed items from the SelectedItems collection.
    • AddedItems—Gets a list of the added items to the SelectedItems collection.

Methods

Additional functionalities for programmatic selectin and deselection of items are exposed by the DataGrid as methods. They also depend on the applied SelectionUnit.

Methods for Programmatic Selection When SelectionUnit Is "Row"

• SelectItem(object item)—Selects the specified data item and adds it to the SelectedItems collection.
• DeselectItem(object item)—Removes the selection for the specified data item and removes it from the SelectedItems collection.

Methods for Programmatic Selection When SelectionUnit Is "Cell"

• SelectCell(DataGridCellInfo item)—Selects the grid cell as defined by the specified cell information.
• DeselectCell(DataGridCellInfo item)—Removes the selection for the grid cell defined by the specified cell information.

Methods for Programmatic Selection of All Items

• SelectAll()—Selects all the items as defined when the SelectionMode is "Multiple".
• DeselectAll()—Clears the current selected items as defined by the SelectionUnit property.

Example

To illustrate how these methods can be used, let's have the following example:

1. Add a sample business object:

   public class Person
   {
   public string Name { get; set; }
   public int Age { get; set; }
   public string Department { get; set; }
   }
   

2. Add a ViewModel with a list of Person objects:

   public class ViewModel
   {
   public ViewModel()
   {
       this.People = new ObservableCollection<Person>()
       {
           new Person { Name = "Kiko", Age = 23, Department = "Production" },
           new Person { Name = "Jerry", Age = 23, Department = "Accounting and Finance"},
           new Person { Name = "Ethan", Age = 51, Department = "Marketing" },
           new Person { Name = "Isabella", Age = 25, Department = "Marketing" },
           new Person { Name = "Joshua", Age = 45, Department = "Production" },
           new Person { Name = "Logan", Age = 26, Department = "Production"},
           new Person { Name = "Aaron", Age = 32, Department = "Production" },
           new Person { Name = "Elena", Age = 37, Department = "Accounting and Finance"},
           new Person { Name = "Ross", Age = 30, Department = "Marketing" },
       };
   }
   
   public ObservableCollection<Person> People { get; set; }
   }
   

3. Add the DataGrid definition:

   <telerik:RadDataGrid x:Name="dataGrid"
                      ItemsSource="{Binding People}" />
   

4. Set the ViewModel class as a BindingContext:

   this.BindingContext = new ViewModel();
   

5. Now, use various approaches to select the first employee from the Marketing department. Each snippet shows a possible approach:

• In the case of row selection, use the SelectItem method:

  var firstMarketingItem = ((ObservableCollection<Person>)this.dataGrid.ItemsSource).First(p => p.Department == "Marketing");
  this.dataGrid.SelectItem(firstMarketingItem);
  

• For a cell selection, use the SelectCell method. It takes as a parameter a DataGridCellInfo object. The DataGridCellInfo object can be easily created by using the needed data item (of type Person in this case) and setting the column corresponding to the cell you need to select.

  var firstMarketingCell = ((ObservableCollection<Person>)this.dataGrid.ItemsSource).First(p => p.Department == "Marketing");
  this.dataGrid.SelectCell(new DataGridCellInfo(firstMarketingCell, this.dataGrid.Columns[2]));
  

• Lastly, call the SelectAll or DeselectAll method like this:

  this.dataGrid.SelectAll();
  

  See Also

• DataGrid Sorting

• DataGrid Commands