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 yourdata
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 theSelectedItems
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 typeDataGridCellInfo
. -
Cell
—SelectedItem
is the same type as the business object.
Events
-
SelectionChanged
—An event that is triggered whenever theSelectedItems
collection is changed. TheSelectionChanged
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 theSelectedItems
collection. -
AddedItems
—Gets a list of the added items to theSelectedItems
collection.
-
- The sender argument, which is of type object, but can be cast to the
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 theSelectedItems
collection. -
DeselectItem
(object item)—Removes the selection for the specified data item and removes it from theSelectedItems
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 theSelectionMode
is "Multiple". -
DeselectAll
()—Clears the current selected items as defined by theSelectionUnit
property.
Example
To illustrate how these methods can be used, let's have the following example:
-
Add a sample business object:
public class Person { public string Name { get; set; } public int Age { get; set; } public string Department { get; set; } }
-
Add a
ViewModel
with a list ofPerson
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; } }
-
Add the DataGrid definition:
<telerik:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding People}" />
-
Set the
ViewModel
class as aBindingContext
:this.BindingContext = new ViewModel();
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 aDataGridCellInfo
object. TheDataGridCellInfo
object can be easily created by using the needed data item (of typePerson
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
orDeselectAll
method like this:this.dataGrid.SelectAll();
See Also
- DataGrid Commands