How to enable NestedGrid when I don't have relations in my datasource in WPF ?

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