[Solved] Loading Grid in Partial view into Master Grid's DetailView

[Brett]

Keeping it simple.

I would like to accomplish the title of this thread.

I currently can get the correct grid layout to load in the correct MasterRow but it will not load with data.

I am running into an issue with the GridAction attribute.  When commented out, the partial view loads (without data) when it is not, it does not load at all.

Please see my test project. (it uses local northwind database).

How can we get the rendered partial view with grid to render correctly?

@(Html.Telerik().Grid<TelerikAjaxGrid.ViewModels.EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.EmployeeID).Hidden();
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .Selectable()
    //.ClientEvents(events => events.OnRowSelect("showOrderID"))

    .DataBinding(dataBinding => dataBinding.Ajax().Select("_EmployeesHierarchyAjax", "Grid"))

    .DetailView(details => details.ClientTemplate("<div id='result_<#= EmployeeID #>'></div>"))
    .ClientEvents(events => events.OnDetailViewExpand("detailGrid_dataBinding"))

    .Pageable(paging => paging.PageSize(5))
    .Scrollable(scrolling => scrolling.Height(580))
    .Sortable()
)

<script type="text/javascript">

    function detailGrid_dataBinding(e) {

        var teleriksMasterRow = e.masterRow;
        var idValue = teleriksMasterRow.cells[1].innerHTML;
        var link = '@Url.Action("_OrdersForEmployeeHierarchyAjax", "Grid", new { id = "replace" })';
        link = link.replace("/replace", "?employeeID=" + idValue);
        alert(link);
        $(this).find('#result_' + idValue).load(link);

    }

    // Find the correct column with the ID.
    function showOrderID(e){

        //for (x in e.row.cells) {
            alert(e.row.cells[1].innerHTML);
        //}
    }
</script>

The above partial view uses the jQuery call to load the below partial view.

@(        Html.Telerik().Grid<TelerikAjaxGrid.ViewModels.OrderViewModel>()
.Name("Orders_<#= EmployeeID #>")
.Columns(columns =>
{

    columns.Bound(o => o.OrderID).Width(101).HtmlAttributes(new { name = "OrderID" });
    columns.Bound(o => o.ShipCountry).Width(140);
    columns.Bound(o => o.ShipAddress).Width(200);
    columns.Bound(o => o.ShipName).Width(200);
    columns.Bound(o => o.ShippedDate).Format("{0:d}");
})

.DetailView(ordersDetailView => ordersDetailView.ClientTemplate(
    Html.Telerik().Grid<TelerikAjaxGrid.ViewModels.OrderDetailsViewModel>()
    .Name("OrderDetails_<#= OrderID #>")
    .Columns(columns =>
    {

        columns.Bound(od => od.ProductName).Width(233);
        columns.Bound(od => od.Quantity).Width(200);
        columns.Bound(od => od.UnitPrice).Width(200);
        columns.Bound(od => od.Discount);

    })

    .DataBinding(dataBinding => dataBinding.Ajax()
    .Select("_OrderDetailsForOrderHierarchyAjax", "Grid", new { orderID = "<#= OrderID #>" }))
    .Pageable()
    .Sortable()
    .ToHtmlString()
    )).Name("OrdersDetailView")
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_OrdersForEmployeeHierarchyAjax", "Grid", new { employeeID = "<#= EmployeeID #>" }))
.Pageable()
.Sortable()
.Filterable()
//.ToHtmlString()
    )

By the way... if the ToHtmlString() is not commented out it sends back a string that is not rendered as HTML.

The MasterGrid from the first partial view calls the jQuery method which calls this controller method in order to load the sub grid.

//[GridAction]
public ActionResult _OrdersForEmployeeHierarchyAjax(int employeeID)
{
    IQueryable<OrderViewModel> orders = service.GetOrdersFromCache(employeeID);
    return PartialView("_PartialGrid", new GridModel(orders));
}