Selection in the .NET MAUI DataGrid
The Telerik UI for .NET MAUI DataGrid exposes a single and multiple selection feature which enables users to select a cell or a row by clicking (tapping) on it.
Users can cancel the selection by clicking the cell or the row again.
To implement the selection feature of the DataGrid, use any of the available properties, methods, and events supported by the DataGrid and depending on your scenario.
Properties
To modify the selection modes of the DataGrid, use some of its most common properties such as SelectionUnit and SelectedItems. To set the SelectionMode property, define which Unit can be selected.
SelectionUnit
The SelectionUnit property of type Telerik.Maui.Controls.DataGrid.DataGridSelectionUnit allows you to control which Unit can be selected:
- (Default)
Row—The unit that will be selected is a DataGrid row. -
Cell—The unit that will be selected is a cell within a DataGrid row.
To define a cell when using a selection, 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.DataGrid.DataGridSelectionUnit.Cell;
SelectionMode
The SelectionMode property of type Telerik.Maui.Controls.DataGrid.DataGridSelectionMode provides the following modes:
- (Default)
Single—Allows you to select a single unit. -
Multiple—Allows you to select multiple units. -
None—Allows no selection.
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.DataGrid.DataGridSelectionMode.Multiple;
SelectedItems
The DataGrid exposes the SelectedItem and SelectedItems properties which you can use depending on whether you have defined a single or multiple selection mode.
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 also directly listen to the CollectionChanged event of the SelectedItems.
The SelectedItem property gets or sets the value of the selected item in the DataGrid. The type of the SelectedItem depends on the value of the SelectedUnit.
-
Row—SelectedItemis of typeDataGridCellInfo. -
Cell—SelectedItemis the same type as the business object.
Events
The DataGrid exposes the SelectionChanged event that is triggered whenever the SelectedItems collection is changed. The SelectionChanged event handler receives the following parameters:
- The sender argument, which is of type object, but can be cast to the
RadDataGridtype. - A
DataGridSelectionChangedEventArgsobject, which provides the following properties: -RemovedItems—Gets a list of the removed items from theSelectedItemscollection. -AddedItems—Gets a list of the added items to theSelectedItemscollection.
Methods
The DataGrid exposes additional functionalities for programmatic selection and deselection of items as methods. They also depend on the applied SelectionUnit.
The DataGrid provides the following methods for programmatic selection when the SelectionUnit is Row:
-
SelectItem(object item)—Selects the specified data item and adds it to theSelectedItemscollection. -
DeselectItem(object item)—Removes the selection for the specified data item and removes it from theSelectedItemscollection.
The DataGrid provides the following methods for programmatic selection when the SelectionUnit is Cell:
-
SelectCell(DataGridCellInfoitem)—Selects the DataGrid cell as defined by the specified cell information. -
DeselectCell(DataGridCellInfoitem)—Removes the selection for the DataGrid cell defined by the specified cell information.
The DataGrid provides the following methods for programmatic selection of all items:
-
SelectAll()—Selects all the items as defined when theSelectionModeisMultiple. -
DeselectAll()—Clears the current selected items as defined by theSelectionUnitproperty.
Example
The following example shows how to use the methods for programmatic selection exposed by the DataGrid:
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. 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
SelectItemmethod:
var firstMarketingItem = ((ObservableCollection<Person>)this.dataGrid.ItemsSource).First(p => p.Department == "Marketing");
this.dataGrid.SelectItem(firstMarketingItem);
- For a cell selection, use the
SelectCellmethod. It takes as a parameter aDataGridCellInfoobject. TheDataGridCellInfoobject can be easy created by using the needed data item (of typePersonin 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]));
6. Call the SelectAll or DeselectAll method:
this.dataGrid.SelectAll();