Binding to ObservableCollection property on object within ObservableCollection

Question

I want to display the "Columns" data of object DataRow in a GridView:

public class DataRow 
{
    public string Row { get; set; }
    public ObservableCollection<IDictionary<string, object>> Columns { get; set; }

    public DataRow(string row, ExpandoObject columnData)
    {
        this.Row = row;
        this.Columns = new ObservableCollection<IDictionary<string, object>>() { columnData as IDictionary<string,object>};
    }
}

All my DataRow objects are collected in an ObservableCollection in another class:

public class Table
{
    public string DataTableName{ get; set; }
    public ObservableCollection<DataRow> Data{ get; set; }
}

And all my Tables are contained in a ObservableCollection in another class:

public class MyTables
{
   public ObservableCollection<Table> MyTables{ get; set; }
}

Thus I've tried to do my binding the following way:

<ItemsControl ItemsSource="{Binding MyTables}">
   <ItemsControl.ItemTemplate>
        <DataTemplate>
             <Grid>
                  <Grid.RowDefinitions>
                        ...
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                        ...
                  </Grid.ColumnDefinitions>

                  <Label ...Text="{Binding DataTableName}"/>

                  <telerik:RadGridView
                        ...
                        AutoGenerateColumns="True"
                        ItemsSource="{Binding Data.Columns}"/>
              </Grid>
         </DataTemplate>
     </ItemsControl.ItemTemplate>
  </ItemsControl>

I don't understand why I can't bind my ItemsSource of the GridView to the Data.Columns- ObservableCollection.

Error message:

BindingExpression path error: 'Columns' property not found on 'object' ''ObservableCollection`1' (HashCode=61300126)'. BindingExpression:Path=Data.Columns; DataItem='Table' (HashCode=50904493); target element is 'RadGridView' (Name=''); target property is 'ItemsSource' (type 'Object')

Beside only displaying the data, the table should support copy/paste from Excel and editing of values. Because I don't know in advance how much rows and columns are needed I'm using the dynamic ExpandoObject where I can add Properties at runtime which are my columns in the data grid.

Kilian Kilian · Accepted Answer · 2019-06-18T09:57:44

The Object called "Data" is an ObservableCollection of DataRow. As mentionned in the error you got, this object has no property called "Columns".
If you want to display Columns for each DataRow in Data, you might want to use a hierarchical grid where you display "Row" property and the Columns data as a child grid. See https://docs.telerik.com/devtools/wpf/controls/radgridview/getting-started/building-hierarchical-grid-view

Binding to ObservableCollection property on object within ObservableCollection

2 Answers