Elegantly Visualize Hierarchical Data with WinUI DataGrid’s Master-Details View!

The Syncfusion WinUI DataGrid is used to display and manipulate tabular data. Its rich feature set includes data binding, editing, sorting, filtering, grouping, and more. Additionally, it has been optimized to handle large datasets and real-time updates efficiently.

In this blog, we will explore the master-details view in the WinUI DataGrid control with code examples.

Note: Before proceeding, refer to the documentation on getting started with WinUI DataGrid.

Master-details view in WinUI DataGrid: An overview

The WinUI DataGrid supports hierarchical data representation (nested grid) through the master-details view. This view allows nested tables (DetailsViewDataGrid) to be expanded or collapsed using an expander in a row or programmatically. The number of nested tables is not limited.

Generating master-details view

The master-details view can automatically generate relations for properties of type IEnumerable within the underlying data object. These relations can be generated either automatically or manually for the master details view.

Let’s see how to generate relations with code examples.

Auto-generating relations

By enabling the AutoGenerateRelations property, the WinUI DataGrid will automatically create relations and inner relations for the IEnumerable property types in the data object.

Refer to the following code example.

<dataGrid:SfDataGrid DataContext="{StaticResource orderInfoViewModel}"
                     x:Name="sfDataGrid"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="True"
                     ItemsSource="{Binding OrdersDetails}"
                     AllowEditing="True"
                     GridLinesVisibility="Both">
</dataGrid:SfDataGrid>

Creating relations manually

You can also manually generate the master-details view relation using the DetailsViewDefinition property when the AutoGenerateRelations property is disabled.

To define relations, create a GridViewDefinition class and assign the name of the Ienumerable type property from the data object to the ViewDefinition.RelationalColumn property. Then, add the GridViewDefinition class you created to the DetailsViewDefinition property of the DataGrid.

Refer to the following code example.

<dataGrid:SfDataGrid DataContext="{StaticResource orderInfoViewModel}"
                     x:Name="sfDataGrid"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="True"
                     HideEmptyGridViewDefinition="True"      
                     ItemsSource="{Binding OrdersDetails}"
                     AllowEditing="True"
                     GridLinesVisibility="Both">
 <dataGrid:SfDataGrid.DetailsViewDefinition>
  <dataGrid:GridViewDefinition RelationalColumn="OrderDetails">
   <dataGrid:GridViewDefinition.DataGrid>
    <dataGrid:SfDataGrid 
                        x:Name="FirstDetailsViewGrid" 
                        AllowEditing="True"
                        GridLinesVisibility="Both"
                        AutoGenerateColumns="True">
    </dataGrid:SfDataGrid>
   </dataGrid:GridViewDefinition.DataGrid>
  </dataGrid:GridViewDefinition>
 </dataGrid:SfDataGrid.DetailsViewDefinition>
</dataGrid:SfDataGrid>

Hiding empty relations

By default, the expander for all the parent records is visible, allowing even empty data to be expanded.

Enable the HideEmptyGridViewDefinition property to prevent empty relations from being displayed and to hide the expander when the corresponding relational column has an empty collection or is null.

Refer to the following code example.

<dataGrid:SfDataGrid DataContext="{StaticResource orderInfoViewModel}"
                     x:Name="sfDataGrid"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="True"
                     HideEmptyGridViewDefinition="True"      
                     ItemsSource="{Binding OrdersDetails}"
                     AllowEditing="True"
                     GridLinesVisibility="Both">
</dataGrid:SfDataGrid>

Refer to the following image.

Enhancing data visualization with master-details view in WinUI DataGrid

Let’s see how to visualize a huge volume of order details with the master-details view in the WinUI DataGrid.

Here, each task (row) has a child grid beneath it that displays a list of orders associated with that task. The parent grid is a DataGrid, and expanding a parent row reveals its child rows. The nested grid UI displays both parent and child rows in a structured grid format, providing additional information about the rows.

The relational column and the grid columns to be shown in the nested grid UI are defined in the following code example.

<dataGrid:SfDataGrid DataContext="{StaticResource orderInfoViewModel}"
                     x:Name="sfDataGrid"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="False"
                     HideEmptyGridViewDefinition="True"      
                     ItemsSource="{Binding OrdersDetails}"
                     AllowEditing="True"
                     GridLinesVisibility="Both">
 <dataGrid:SfDataGrid.DetailsViewDefinition>
  <dataGrid:GridViewDefinition RelationalColumn="OrderDetails">
   <dataGrid:GridViewDefinition.DataGrid>
    <dataGrid:SfDataGrid 
                        x:Name="FirstDetailsViewGrid" 
                        AllowEditing="True"
                        GridLinesVisibility="Both"
                        AutoGenerateColumns="false">
     <dataGrid:SfDataGrid.Columns>
      <dataGrid:GridNumericColumn HeaderText="Order ID" MappingName="OrderID" TextAlignment="Right"/>
      <dataGrid:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
       <dataGrid:GridNumericColumn HeaderText="Product ID"   MappingName="ProductID"  TextAlignment="Right" />
       <dataGrid:GridNumericColumn MappingName="Quantity" TextAlignment="Right" />
       <dataGrid:GridNumericColumn MappingName="Discount"  TextAlignment="Right" DisplayNumberFormat="P"/>
       <dataGrid:GridDateColumn MappingName="OrderDate" GroupMode="Display" HeaderText="Order Date" TextAlignment="Right" />
      </dataGrid:SfDataGrid.Columns>
     </dataGrid:SfDataGrid>
    </dataGrid:GridViewDefinition.DataGrid>
   </dataGrid:GridViewDefinition>
  </dataGrid:SfDataGrid.DetailsViewDefinition>
  <dataGrid:SfDataGrid.Columns>
   <dataGrid:GridNumericColumn HeaderText="Order ID" MappingName="OrderID" TextAlignment="Right"/>
   <dataGrid:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
   <dataGrid:GridDateColumn GroupMode="Display" HeaderText="Shipping Date" MappingName="ShippedDate" TextAlignment="Right" />
   <dataGrid:GridTextColumn HeaderText="Product Name" MappingName="ProductName" />
   <dataGrid:GridTextColumn HeaderText="Company Name" MappingName="CompanyName"/>
   <dataGrid:GridNumericColumn MappingName="Quantity" />
   <dataGrid:GridTextColumn HeaderText="Ship Country" MappingName="ShipAddress" />
   <dataGrid:GridNumericColumn MappingName="Freight" NumberFormatter="{Binding SystemCurrency,Source={StaticResource orderInfoViewModel}}" TextAlignment="Right" />
  </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>

Refer to the following output GIF image.

GitHub reference

For more details, refer to the master-details view (Nested Grid UI) in the WinUI DataGrid project on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored how to enhance data visualization using the master details view in the Syncfusion WinUI DataGrid. We encourage you to try these steps and share your feedback in the comments below.

Existing customers can download the new version of Essential Studio for WinUI on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to experience our incredible features. 

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

• Easily Export WinUI DataGrid to Excel
• Easily Load Appointments in WinUI Scheduler with SQLite and Perform CRUD Actions
• From Stars to Hearts: Explore Creative Rating Designs in WinUI
• Chart of the Week: Creating a WinUI Stacked Area Chart to Visualize US Primary Energy Consumption