How to enable NestedGrid in my DataSource with WPF SfDataGrid?

SfDataGrid allows you to enable NestedGrid even when you do not have any relations in your data source, by handling “DetailsViewExpanding” event. You can use the DetailsViewItemsSource property of GridDetailsViewExpandingEventArgs to set ItemsSource for NestedChild.

The GridDetailsViewExpandingEventArgs contains the following properties:

• Cancel – If this property is set to true, the event is cancelled and the Details View is not be expanded.
• Record – Get the row data.
• DetailsViewItemsSource – A dictionary of strings and IEnumerable objects that holds the Relational Column as its key and the item source as its value.

For example, consider two ItemsSource “OrderInfo” and “OrderDetails” where the ItemsSource OrderDetails is the NestedChild of OrderInfo. The DetailsViewExpanding event occurs whenever the Nested Expander is pressed .The event can be invoked by creating an empty Relation as illustrated in the following code example. You can give any name to the RelationColumn as you are creating relations to show the Nested Expander, so that when clicking the expander you can load the ItemSource by handling DetailsViewExpanding event. The HideEmptyGridViewDefinition property of the SfDataGrid is to be set false to display the empty grid.

<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" HideEmptyGridViewDefinition="False">
    <syncfusion:SfDataGrid.DetailsViewDefinition>
        <syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
            <syncfusion:GridViewDefinition.DataGrid>
                <syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid">
                    <syncfusion:SfDataGrid.Columns>
                        <syncfusion:GridTextColumn MappingName="OrderID" />
                        <syncfusion:GridTextColumn MappingName="CustomerID" />
                        <syncfusion:GridTextColumn MappingName="ProductID" />
                        <syncfusion:GridTextColumn MappingName="UnitPrice" />
                        <syncfusion:GridTextColumn MappingName="Quantity" />
                        <syncfusion:GridNumericColumn MappingName="Discount" />
                        <syncfusion:GridTextColumn MappingName="OrderDate" />
                    </syncfusion:SfDataGrid.Columns>
                </syncfusion:SfDataGrid>
            </syncfusion:GridViewDefinition.DataGrid>
        </syncfusion:GridViewDefinition>
    </syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>

The following snapshot illustrates the output of the above code in SfDataGrid, in which an empty NestedGrid is created.

Now, you can create OrderDetails as NestedChild of OrderInfo by handling the event “DetailsViewExpanding” and setting DetailsViewItemSource in that event from the “OrderDetails” table, as shown in the following code example.

this.dataGrid.DetailsViewExpanding += dataGrid_DetailsViewExpanding;
 
void dataGrid_DetailsViewExpanding(object sender, GridDetailsViewExpandingEventArgs e)
{
    var viewModel = this.DataContext as ViewModel;
    var orderInfo = e.Record as OrderInfo;
    var orderDetails = viewModel.OrderDetails.Where(order => order.OrderID == orderInfo.OrderID);
    e.DetailsViewItemsSource["OrderDetails"] = orderDetails;
}        

Here, the two ItemsSource are related using the property “OrderID”. The following snapshot illustrates the effect of above code in SfDataGrid.

Sample Links:

WPF

WinRT

SilverLight

UWP

I hope you enjoyed learning about how to enable NestedGrid in my DataSource with WPF SfDataGrid.

You can refer to our WPF SFDataGrid featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!