Creating an expandable grid in MVC3 - data modelling - asp.net

Question

I am trying to create an expandable grid in MVC3. This is a follow up question to this .
Basically I have a complicated sql query that I need to use to populate a set of fields in a grid in MVC3. Also the grid elements must be expandable and on expansion should show additional data.
For example
I have two sql queries
Query A
select * from large tables joined
Query B
select data from selected row in query A
Query A represents my first query which I should use to populate the grid. On expansion of the grid I have to show the additional data by expanding the row from A with the query B.
I am creating a view model with all the fields I need in the first row of the grid that I can pass to the view.
Questions:
1.) How do I directly use sql to pass the data into the views instead of joining the models
2.) How do I make the grid expandable to show additional data?
3.) How do I model my sql, do I create one query for both and then selectively show data?
Caveat: MVC3 noob

Answer 1

Answers inline
Questions:
1.) How do I directly use sql to pass the data into the views instead of joining the models
This depends, either you pass in everything up front and write out hidden fields, or a hidden JSON object containing all the data and when the field is expanded, show it. so that is: Render all the data in your grid and hide each item until you need it, or dynamically load it from an array and show it when the user expands. You could also dynamically grab the required data when a user clicks on a row, but then you'd need to show a wait image while you grab the data by ajax (which would be fairly easy with mvc)
2.) How do I make the grid expandable to show additional data?
Plenty of expandable html grid results on the net :) Depend show you want to hide/show it.
3.) How do I model my sql, do I create one query for both and then selectively
This depends on the approach in 1 above. If you use ajax, you'd be returning one row at a time. In the other scenario you can have two queries you then merge into two view models or you join query A results with query b if theres a 1-1 mapping, assuming there isn't though so make two calls. Again, this is up to you. Do you want to pass all that data up front if the user will only expand two rows? not likely, in that case I like the ajax approach.