Question

I have the current code that defines my itemsource (what I want to display to the user):

public class View
{
public string Name { get; set; }
public string Quantity { get; set; }
public List<Item> items { get; set; }
}

public class Item
{
public string ItemName { get; set; }
public double ItemQuantity { get; set; }
}

DataSet used:

List<View> myViews

So you end up with data like:

ViewA 50 {ItemA 50, ItemB 10, ItemC 20)
ViewB 10 {ItemC 10, ItemD 10, ItemE 10)

In my datagrid right now it shows the first two columns perfectly but the List shows as “Collection” (not the actual data), which I guess was to be expected.

This is my XAML right now

        <DataGrid Grid.Row="2" Margin="0,146,0,350"
              ItemsSource="{Binding myViews}"
              AutoGenerateColumns="False" Height="104">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Width="*" FontSize="16"
                                Binding="{Binding Path=Name}" />
                <DataGridTextColumn Header="Quantity" Width="*" FontSize="16"
                                Binding="{Binding Path=Quantity}" />
                <DataGridTextColumn Header="Items" Width="*" FontSize="16"
                                Binding="{Binding Path=items}" />
            </DataGrid.Columns>
        </DataGrid>

I am trying to find a way to represent the List items to the user (either in this datagrid or some other way if this is not the right approach).

My idea was to actually have another Datagrid in the 3rd column with its own source of items, but I can’t seem to find out how I can make the 3rd column a Datagrid (as opposed to text like it is today). Does anyone know how this can be done (some examples would be awsome).

Or if this is really NOT the right way to solve this problem, any other ideas would also be much appreciated.

Thanks,

Answer 1

You can use RowDetailsTemplate to present list of Item objects.

 <DataGrid Grid.Row="2"  Margin="0,146,0,350"
      ItemsSource="{Binding myViews}"
      AutoGenerateColumns="False" Height="104">
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding items}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Item Name" Width="Auto" FontSize="16"
                            Binding="{Binding Path=ItemName}" />
                    <DataGridTextColumn Header="Item Quantity " Width="Auto" FontSize="16"
                            Binding="{Binding Path=ItemQuantity }" />
                </DataGrid.Columns>
            </DataGrid>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Width="*" FontSize="16"
                        Binding="{Binding Path=Name}" />
        <DataGridTextColumn Header="Quantity" Width="*" FontSize="16"
                        Binding="{Binding Path=Quantity}" />                
    </DataGrid.Columns>
</DataGrid>

If you want present list of Item objects in third columns you should use DataGridTemplateColumn.

<DataGrid Grid.Row="2" Margin="0,146,0,350"
      ItemsSource="{Binding myViews}"
      AutoGenerateColumns="False" Height="104">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Width="*" FontSize="16"
                        Binding="{Binding Path=Name}" />
        <DataGridTextColumn Header="Quantity" Width="*" FontSize="16"
                        Binding="{Binding Path=Quantity}" />
        <DataGridTemplateColumn Header="Items">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding items}">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Item Name" Width="Auto" FontSize="16"
                            Binding="{Binding Path=ItemName}" />
                            <DataGridTextColumn Header="Item Quantity " Width="Auto" FontSize="16"
                            Binding="{Binding Path=ItemQuantity }" />
                        </DataGrid.Columns>
                    </DataGrid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>               
    </DataGrid.Columns>
</DataGrid>