Both views are possible. I think, though, it will take some thought and ingenuity to make this happen cleanly. First, we would need to create a Views table that can add "details" as a secondary row.
https://drupal.org/project/views_secondary_row
Next, you would want to be sure you're only showing the "parent" line items in your order. So you would want a filter that will weed out all "sub products." Usually helpful if sub products are a certain line item type or have a certain flag (checkbox field that gets checked when creating products?) on the referenced product to denote those types of line items that will be displayed in the secondary row.
Next we would need to add an embedded view to this secondary row (comes in Views 3 as a global option).
Next, we assume you have created your products in such a way it's easy to go from one product to a list of sub products. An easy way to do this is to add an entity reference field to products called "sub products" and then create a relationship based on the reference field.
The "embedded view" would take a product_id as an argument and spit out all the product displays (not the products themselves) from the relationship we mentioned above.
The next trick is to spit out either an "Add to Cart" form or an "update quantity" form. Add to cart should be easy. Just add the appropriate field for the add to cart.
From here, I'm not sure how we would continue. You see, the quantity update is a Views form element and I'm not exactly sure we could make it work with an embedded view. But lets assume that it's entirely possible (needs testing, possibly a simple custom views field), we would add a "quantity" field that interacts with the original cart's views form. Now we have BOTH an add to cart form and a quantity form.
Again, I would have to get to this point and explore how we might show only one or the other. Since the quantity is a line item field and the cart form is a node field, I'd probably hide the cart form and set the line item field to show the cart form [shortcode] when that field is "empty" (because there is no line item).
This is a tricky problem and would probably have many "head scratcher" moments. Have you considered hiring Commerce Guys to help you finalize this one part of your requirements? We do hourly chunks :D
http://commerceguys.com/quote
You can link to this answer to help us with an estimate.
Comments
I have been able to create related product using entity or node reference and relate a parent product to the child product. You can refer to https://drupal.org/node/1465920 for further info.
Now my problem is how to configure views to show the sub product under the parent product in the commerce cart page. So the user can see which sub product belongs to which parent.
Example
---Main Product 1 ---------------Price--Quantity---Total
------Available Sub Products
--------Sub product 1 -----------Price--Quantity---[ADD TO CART]
--------Sub product 2 -----------Price--Quantity---[ADD TO CART]
--------Sub product 3 -----------Price--Quantity---[ADD TO CART]
---Main Product 2 ---------------Price--Quantity---Total
------Available Sub Products
--------Sub product 1.2 -----------Price--Quantity---[ADD TO CART]
--------Sub product 2.2 -----------Price--Quantity---[ADD TO CART]
--------Sub product 3.2 -----------Price--Quantity---[ADD TO CART]
And after the product has been added to the cart the view table looks like this
---Main Product 1 ---------------Price--Quantity---Total
------Available Sub Products
--------Sub product 1-----------Price--Quantity---[UPDATE]
--------Sub product 2-----------Price--Quantity---[UPDATE]
--------Sub product 3-----------Price--Quantity---[UPDATE]
---Main Product 2 ---------------Price--Quantity---Total
------Available Sub Products
--------Sub product 1.2-----------Price--Quantity---[UPDATE]
--------Sub product 2.2-----------Price--Quantity---[UPDATE]
--------Sub product 3.2-----------Price--Quantity---[UPDATE]
How do i implement such a display in views. Thanks