Skip to content

Latest commit

 

History

History
80 lines (61 loc) · 3.4 KB

datagrid-maui-toggle-row-details-cell-selection.md

File metadata and controls

80 lines (61 loc) · 3.4 KB
title description type page_title slug tags res_type
Managing Row Details in DataGrid for MAUI on Cell or Row Selection
Learn how to toggle row details in a DataGrid for MAUI application based on cell or row selection.
how-to
How to Display Row Details Based on Cell or Row Selection in DataGrid for MAUI
datagrid-maui-toggle-row-details-cell-selection
datagrid, maui, row details, cell selection, row selection, expandedrowdetails, selectionchanged
kb

Environment

Product Version Author
DataGrid for .NET MAUI 7.1.0 Dobrinka Yordanova

Description

In a DataGrid for MAUI, I want to show or hide row details based on cell selection without using the default DataGridToggleRowDetailsColumn. The goal is to use the SelectionChanged event to achieve this functionality. This KB article also answers the following questions:

  • How can I show row details on cell selection in a DataGrid?
  • What is the method to toggle row details visibility based on cell selection?
  • How to use the SelectionChanged event to show row details in the DataGrid for MAUI?

Solution

To display row details based on cell selection:

  1. Define a RowDetailsTemplate. For more information on how to set up a RowDetailsTemplate, refer to the [Row Details Template documentation]({%slug datagrid-row-details-template%}).
  2. Handle the selection:

Handling Cell Selection

When the SelectionUnit is set to Cell, the item within the e.AddedItems or e.RemovedItems collections is of type DataGridCellInfo. To add or remove items from the ExpandedRowDetails collection based on cell selection, use the following approach:

void dataGrid_SelectionChanged(System.Object sender, DataGridSelectionChangedEventArgs e)
{
    RadDataGrid dataGrid = sender as RadDataGrid;

    foreach (DataGridCellInfo item in e.AddedItems)
    {
        dataGrid.ExpandedRowDetails.Add(item.Item);
    }
    foreach (DataGridCellInfo item in e.RemovedItems)
    {
        dataGrid.ExpandedRowDetails.Remove(item.Item);
    }
}

This code listens for the SelectionChanged event and appropriately adds or removes the items associated with the selected or deselected cells to or from the ExpandedRowDetails collection, thus showing or hiding the row details.

Handling Row Selection

If the SelectionUnit is set to Row, the objects in the e.AddedItems and e.RemovedItems collections are your business objects. You can handle them as follows:

void dataGrid_SelectionChanged(System.Object sender, DataGridSelectionChangedEventArgs e)
{
    RadDataGrid dataGrid = sender as RadDataGrid;

    foreach (var item in e.AddedItems)
    {
        dataGrid.ExpandedRowDetails.Add(item);
    }
    foreach (var item in e.RemovedItems)
    {
        dataGrid.ExpandedRowDetails.Remove(item);
    }
}

This snippet functions similarly to the cell selection scenario but is tailored for when entire rows are selected.

Notes

  • Ensure the SelectionUnit property of the RadDataGrid is properly set according to your requirements (Cell or Row).
  • The ExpandedRowDetails collection directly controls the visibility of row details.