.NET MAUI DataGrid Row Details Template

The .NET MAUI DataGrid control defines a RowDetailsTemplate property (type DataTemplate). The property is used for displaying row details.

The following example shows how to define the RowDetailsTemplate property in the DataGrid control.

1. Define the DataGrid in XAML:

• XAML

<telerik:RadDataGrid x:Name="dataGrid"
                     AutoGenerateColumns="False"
                     RowDetailsTemplate="{StaticResource TemplateForRowDetails}">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridToggleRowDetailsColumn />
        <telerik:DataGridTextColumn PropertyName="Country" />
        <telerik:DataGridTextColumn PropertyName="Capital" /> 
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

2. Define RowDetailsTemplate in XAML:

• XAML

<telerik:RadContentView.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="TemplateForRowDetails">
            <Grid BackgroundColor="#F2EFF9"
                  Padding="12">
                <Label Text="{Binding Details}" />
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</telerik:RadContentView.Resources>

3. Define the Business Model:

• C#

public class Data
{
    public string Country { get; set; }
    public string Capital { get; set; }
    public string Details { get; set; }
}

4. Define the ItemsSource:

• C#

List<Data> items = new List<Data>
{
    new Data { Country = "India", Capital = "New Delhi" , Details = "New Delhi is the capital of India and a part of the National Capital Territory of Delhi (NCT). New Delhi is the seat of all three branches of the Government of India, hosting the Rashtrapati Bhavan, Sansad Bhavan, and the Supreme Court."},
    new Data { Country = "South Africa", Capital = "Cape Town", Details = "Cape Town is South Africa's oldest city. It serves as the country's legislative capital, being the seat of the South African Parliament.It is the country's second-largest city (after Johannesburg) and the largest in the Western Cape."},
    new Data { Country = "Nigeria", Capital = "Abuja" , Details = "Abuja is the capital city of Nigeria. When it was decided to move the national capital from Lagos in 1976, a capital territory was chosen for its location near the centre of the country. The planned city is located in the centre of what is now the Federal Capital Territory." },
    new Data { Country = "Singapore", Capital = "Singapore" , Details = "Singapore is the capital city of the Republic of Singapore. It occupies the southern part of Singapore Island. Its strategic position on the strait between the Indian Ocean and South China Sea, complemented by its deepwater harbour, has made it the largest port in Southeast Asia." }
};

5. In addition, you can define the row details to be expanded:

• C#

this.dataGrid.ItemsSource = items;
this.dataGrid.ExpandedRowDetails = new ObservableCollection<Data>(items);

The image below illustrates the result from the code snippets: