How to create Nested DataGrid View (Master Details View) in WinUI DataGrid?

About the sample

This example illustrates how to create Nested DataGrid View (Master Details View) in WinUI DataGrid.

WinUI DataGrid (SfDataGrid) provides support to represent the hierarchical data in the form of nested tables using Master-Details View. You can expand or collapse the nested tables by using an expander in a row or programmatically.

Generating Master-Details view from IEnumerable

Master-Details View’s relation can be generated for the properties of type IEnumerable exists in the underlying data object.

Auto-generating relations

SfDataGrid can automatically generate relations and inner relations for the IEnumerable type properties in the underlying data object. This can be enabled by setting SfDataGrid.AutoGenerateRelations to true.

<syncfusion:SfDataGrid x:Name="dataGrid”
                       AllowGrouping="True"
                       AutoGenerateColumns="True"
                       AutoGenerateRelations="False"
                       ItemsSource="{Binding Path=OrdersDetails}"/>

When relations are auto-generated, you can handle the SfDataGrid.AutoGeneratingRelations event to customize or cancel the GridViewDefinition before they are added to the SfDataGrid.DetailsViewDefinition.

Manually defining Relations

You can define the Master-Details View’s relation manually using SfDataGrid.DetailsViewDefinition, when the SfDataGrid.AutoGenerateRelations is false.

To define Master-Details View relations, create GridViewDefinition and set the name of IEnumerable type property (from data object) to ViewDefinition.RelationalColumn. Then, add the GridViewDefinition to the SfDataGrid.DetailsViewDefinition.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       AutoGenerateColumns="True"
                       AutoGenerateRelations="False"
                       ItemsSource="{Binding Path=OrdersDetails}">
            <syncfusion:SfDataGrid.DetailsViewDefinition>
                <syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
                    <syncfusion:GridViewDefinition.DataGrid>
                        <syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid"  ColumnWidthMode="Star" >
                        </syncfusion:SfDataGrid>
                    </syncfusion:GridViewDefinition.DataGrid>
                </syncfusion:GridViewDefinition>
            </syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid> 

Expanding and collapsing the DetailsViewDataGrid programmatically

SfDataGrid allows you to expand or collapse the DetailsViewDataGrid programmatically in different ways.

Expand or collapse all the DetailsViewDataGrid

You can expand or collapse all the DetailsViewDataGrid programmatically by using ExpandAllDetailsView and CollapseAllDetailsView methods.

this.dataGrid.ExpandAllDetailsView();
this.dataGrid.CollapseAllDetailsView();

Expand DetailsViewDataGrid based on level

You can expand all the DetailsViewDataGrid programmatically based on level using ExpandAllDetailsView method.

this.dataGrid.ExpandAllDetailsView(2);

Expand or collapse Details View based on record index

You can expand or collapse DetailsViewDataGrid based on the record index by using ExpandDetailsViewAt and CollapseDetailsViewAt methods.

this.dataGrid.ExpandDetailsViewAt(0);
this.dataGrid.CollapseDetailsViewAt(0);

Defining properties for DetailsViewDataGrid When AutoGenerateRelations is false

For manually defined relation, the properties can be directly set to the GridViewDefinition.DataGrid.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       Margin="5"
                       AllowGrouping="True"
                       AutoGenerateColumns="True"
                       AutoGenerateRelations="False"
                       ColumnWidthMode="Star"
                       HideEmptyGridViewDefinition="True"
                       ItemsSource="{Binding Path=OrdersDetails}">
            <syncfusion:SfDataGrid.DetailsViewDefinition>
                <syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
                    <syncfusion:GridViewDefinition.DataGrid>
                        <syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid"
                                               AllowEditing="True"
                                               AllowFiltering="True"
                                               AllowResizingColumns="True"
                                               AllowSorting="True"
                                               AutoGenerateColumns="False" >
                        </syncfusion:SfDataGrid>
                    </syncfusion:GridViewDefinition.DataGrid>
                </syncfusion:GridViewDefinition>
            </syncfusion:SfDataGrid.DetailsViewDefinition>
        </syncfusion:SfDataGrid>

Defining properties for DetailsViewDataGrid When AutoGenerateRelations is true

When the relation is auto-generated, you can get the GridViewDefinition.DataGrid in the AutoGeneratingRelations event handler to set the properties.

this.dataGrid.AutoGeneratingRelations += dataGrid_AutoGeneratingRelations;

void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingRelationsArgs e)
{
     e.GridViewDefinition.DataGrid.AllowEditing = true;
     e.GridViewDefinition.DataGrid.AllowFiltering = true;
     e.GridViewDefinition.DataGrid.AllowSorting = true;
     e.GridViewDefinition.DataGrid.AllowResizingColumns = true;
}

Hiding expander when parent record’s relation property has an empty collection or null

By default, the expander will be visible for all the data rows in parent DataGrid even if its RelationalColumn property has an empty collection or null. You can hide the expander from the view when corresponding RelationalColumn property has an empty collection or null, by setting HideEmptyGridViewDefinition property as true.

<syncfusion:SfDataGrid x:Name="dataGrid"
                       HideEmptyGridViewDefinition="True"
                       ItemsSource="{Binding Path=OrdersDetails}"/>

Take a moment to peruse the WinUI DataGrid - Master Details View documentation, where you can find about master details view, with code examples.

Requirements to run the demo

Visual Studio 2015 and above versions.