Displaying Gridview Master Detail so that the details are shown below each master

Question

I use ASP.NET’s Gridview control to display the information of two tables that have a master-detail relation. Table 1: Purchase (Idcompra, Datacompra e Valorcompra) and Table 2: Compraitem (Idcompraitem, Name, Quantity).

I would like to display a list page more or less that way:

1 - 03/04/2016 - R$100,00

• 4 - Pen - 20 units

• 6 - Pencils - 10 units

• 7 - Rubber - 5 pieces

2 - 03/04/2016 - R$ 50,00

• 9 - pointer - 3 units

• 10 - Pencils - 2 units

3 - 04/04/2016 - R$ 5,00

• 15 - Paper - 3 boxes

Could I do that with bootstrap? How? Is there another way?

Answer 1

Take a look at the link below, it’s a little different because it only shows if you expand: http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

What he does is create a Gridview (table) and create within it a template field with another Gridview. This code uses javascript to show and hide subGrid.