Kendo web grid mvc hierarchy datasource detailtemplate when local data

Question

I have a kendo grid in MVC this is the declaration Html.Kendo().Grid(Model.Orders)

the object "Orders" has a list of "Details". I want to put this list in a second grid with the property ClientDetailTemplateId. demo

My question is, How I set the datasource of the template since the "Model" already has the data, in the example of the Hierarchy the datasource call an action in the controller

Answer 1

I struggled with this one for quite a while and eventually learned that this can be done using Server binding.

The key seems to be the (as far as I can tell, undocumented) "item" variable that is available in the DetailTemplate which gives you the current row on the "master" grid which contains the data that should be bound to the detail grid ("Details" in your case)

Here's the ServerHierarchy sample from Kendo:

@model IEnumerable<Kendo.Mvc.Examples.Models.Employee>

@{ Html.Kendo().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        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);
    })
    .DetailTemplate(
        @<text>           
            @(Html.Kendo().Grid(item.Orders)
                    .Name("Orders_" + item.EmployeeID)
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.OrderID).Width(101);
                        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}");
                    })
                    .DataSource(dataSource => dataSource.Server())                    
                    .Pageable()
                    .Sortable()
                    .Filterable()
            )
        </text>
    )
    .RowAction(row => 
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
        else
        {
            var requestKeys = Request.QueryString.Keys.Cast<string>();
            var expanded = requestKeys.Any(key => key.StartsWith("Orders_" + row.DataItem.EmployeeID) ||
                key.StartsWith("OrderDetails_" + row.DataItem.EmployeeID));
            row.DetailRow.Expanded = expanded;
        }
    })
    .Pageable()
    .DataSource(dataSource => dataSource.Server().PageSize(5))    
    .Sortable()
    .Render();
} 

Answer 2

in template instead of writing Grid code, Call a partial view and pass Orders model to it

<script id="template" type="text/kendo-tmpl">
@Html.Partial("_Orders",Model.Order)
</script>

in this partial view write the Kendo grid code with model as Orders model

Partial View

 @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(70);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )