WPF Data Grid : Operation is not valid while ItemsSource is in use.

Question

Please see my XAML below: basically I'm trying to create a hierarchical datagrid.

<Window x:Class="My.Forms.Wpf.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Asst="clr-namespace:mY.Data;assembly=Assette.Data"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ObjectDataProvider x:Key="src" ObjectType="{x:Type Asst:CustomerRepo}" ></ObjectDataProvider>
</Window.Resources>
<Grid DataContext="{StaticResource src}">
    <DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False" RowDetailsVisibilityMode="Collapsed" >
        <DataGrid.Columns>
            <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
            <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
            <DataGridTextColumn Header="Email" Binding="{Binding Email}" />
            <DataGridTextColumn Header="Telephone" Binding="{Binding Telephone}" />
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Click="ShowHideDetails">Details</Button>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <DataGrid ItemsSource="{Binding Orders}" AutoGenerateColumns="False">
                    <DataGridTextColumn Header="Product Name" Binding="{Binding ProductName}" />
                    <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" />
                    <DataGridTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" />
                    <DataGridTextColumn Header="Total Price" Binding="{Binding TotalPrice}" />
                </DataGrid>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
</Grid>

This is bound to an in memory collection:

   public class CustomerRepo
{
    public ObservableCollection<Customer> Customers { get; set; }
    //CustomerDataEntities custDb = new CustomerDataEntities();
    public CustomerRepo()
    {
        Customers = new ObservableCollection<Customer>();
        Customers.Add(new Customer { FirstName = "John", LastName = "Doe", Email = "[email protected]", Telephone = "+94773260789" });
        Customers.Add(new Customer { FirstName = "Albert", LastName = "Einstein", Email = "[email protected]", Telephone = "+46546546" });
        Customers.Add(new Customer { FirstName = "Carlos", LastName = "Puyol", Email = "[email protected]", Telephone = "+5465465" });


        var customer1 = new Customer { FirstName = "Lionel", LastName = "Messi", Email = "[email protected]", Telephone = "+756454686" };
        customer1.Orders.Add(new Order { ProductName = "Boot", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });
        customer1.Orders.Add(new Order { ProductName = "Soccer Ball", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });
        customer1.Orders.Add(new Order { ProductName = "Jersey", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });

        Customers.Add(customer1);

        var customer2 = new Customer { FirstName = "Gerath", LastName = "Bale", Email = "[email protected]", Telephone = "+12312333" };
        customer2.Orders.Add(new Order { ProductName = "Shorts", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });
        customer2.Orders.Add(new Order { ProductName = "Guards", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });
        customer2.Orders.Add(new Order { ProductName = "Sports Bag", Quantity = 1, UnitPrice = 100, TotalPrice = 200 });

        Customers.Add(customer2);

        Customers.Add(new Customer { FirstName = "Cristiano", LastName = "Ronaldo", Email = "[email protected]", Telephone = "+234234234" });
        Customers.Add(new Customer { FirstName = "Iker", LastName = "Cassilas", Email = "[email protected]", Telephone = "+54645645" });
    }
}

Basically when i click on the details button i want this to show the detailsview which is another grid. if the details grid is set to AutoGenerateColumns=true it all works fine, but when i manually set the column details it throws the following exception:

Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.

Any idea on this ?

Answer 1

For the inner dataGrid, you forgot to wrap the columns under <DataGrid.Columns> tag:

<DataGrid ItemsSource="{Binding Orders}" AutoGenerateColumns="False">
  <DataGrid.Columns> <-- This is missing.
     <DataGridTextColumn Header="Product Name" Binding="{Binding ProductName}" />
     <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" />
     <DataGridTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" />
     <DataGridTextColumn Header="Total Price" Binding="{Binding TotalPrice}" />
  </DataGrid.Columns>
</DataGrid>