Elegantly Visualize Hierarchical Data with WinUI DataGrid’s Master-Details View!
TL;DR: Are you seeking a tool to visualize your complex hierarchical data? Dive into the WinUI DataGrid’s master details view! Learn to represent hierarchical data and generate relations for nested tables effortlessly with code examples, simplifying your data visualization process!
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.
Hiding expander for empty relation rows in WinUI DataGrid
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.
Visualizing the hierarchical data using the master-details view (Nested grid UI) in WinUI DataGrid
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!