DetailView - how to achieve this? Grid and tables

[AilWeb]

Ok so I have a grid im using in my MVC3 application.  It will have a master/detail setup, but the detailview being requested by the customer is complicated.  The detailview would include both a small grid as well as two tables that contain fields that are populated with data associated with the parent record.

If I only had a grid to display in the detailview, I could set it up something like this
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-master---detail-client-detail-template-and-hierarchy.html

Specificially, this example is what im currently looking at.
How could I combine the detail grid, with another section of html that immediately follows the detail grid ?

<%= Html.Telerik().Grid<MvcApplication.Models.Employee>()
            .Name("Employees")
            .DataBinding(dataBinding => dataBinding.Ajax()
                // Specify the action method which returns the Employee objects
                .Select("_Employees", "Home"))
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName);
                columns.Bound(e => e.LastName);
                columns.Bound(e => e.Title);
            })
            .DetailView(detailView => detailView.ClientTemplate(
                // Define a grid bound to the Order object
                Html.Telerik().Grid<MvcApplication.Models.Order>()
                     //Ensure the Name of each grid is unique
                     .Name("Orders_<#= EmployeeID #>")
                     .DataBinding(dataBinding => dataBinding.Ajax()
                        // Specify the action method which returns the Orders for a particular Employee
                        // Notice how the `EmployeeID` value is passed as the `id` argument using a client expression
                     .Select("_Orders", "Home", new { id = "<#= EmployeeID #>"}))
                     .Columns(columns =>
                     {
                         columns.Bound(o => o.OrderID);
                         columns.Bound(o => o.ShipName);
                         columns.Bound(o => o.ShipAddress);
                         columns.Bound(o => o.ShipCity);
                     })
                     .Pageable()
                     // The client detail view template requires a string so we are using the ToHtmlString method
                     .ToHtmlString()
            ))
            // Handle the OnRowDataBound event in order to expand certain rows
            .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
    %>

 

However, below this grid, I then want to display the two other tables that contain editble text boxes and other html content BELOW the detailview grid.
Is this possible?

[AilWeb]

Should I be looking at wrapping the grid within another control?  Ive seen a few examples of adding a grid to a tabstrip via the tabstrip's items collections.  Maybe a window component, and then add a grid and a block of html below the grid?

[AilWeb]

Ok, now that Ive thought about it a bit, I think I will need to use the following approach. 

The grid that we want to use in the detail view will only have a few rows at most, and its really nothing more than a table.  Its items will be read only.  The two other areas below this nested/child grid are also tables.  So therefore, I think I can use a partial view to contain this detailview template.  Then call an MVC controller action method to fetch the data needed and populate the view elements with jQuery.

Sound reasonable?

I had started down this road earlier, but then was getting tripped up on some of the examples that showed nested grids.  Thats fine, but in my case, I needed more than a grid in the detailview.  The detailview needed to be something custom.

This is just about your only other option besides defining the detailview template directly "inline" with the main grid definition.