Subgrid server binding

[Wayne]

Is it possible to bind a complex object to both the master grid and the subgrid using the html helper?  For example, if I have a collection of Employers, and each Employer contains a collection of Employees, and these collections share a EmployeeId.  Is it possible to bind the Employer to the master grid, and have the subgrid bound to Employees?  I need this to all be bound simultaneously so that the main and subgrids can both be displayed when the page loads.  Thanks.

[Vladimir Iliev]

Hi Wayne,

 
Basically it's possible using the DetailInit event of the master grid to pass the IEnumerable property data to the child grid dataSource data method - please check the example below:

Order model:

public class Order
{
    public int OrderID { get; set; }
    public DateTime OrderDate { get; set; }
    public string OrderDescription { get; set; }
    public int EmployeeID { get; set; }
    public List<Employee> RelatedEmployees { get; set; }
}

Employee model:

public class Employee
{
    public int EmployeeID;
    public string Name;
}

Define DetailInit event handler and detail template:

@(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
    .Name("Grid")
    .ClientDetailTemplateId("detailTemplate")
    .Events(e => e.DetailInit("onDetailInit"))

Detail template:

<script type="text/x-kendo-template" id="detailTemplate">
    @(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Employee>()
        .Name("grid#=OrderID#")
        .AutoBind(false)
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)).ToClientTemplate()

        )

DetailInit event handler:

function onDetailInit(e) {
    var detailGrid = $("#grid" + e.data.EmployeeID).data("kendoGrid");
    //pass the IEnumerable property to the data method of the child grid dataSource
    detailGrid.dataSource.data(e.data.RelatedEmployees);
}

Kind regards,
Vladimir Iliev
the Telerik team

[Wayne]

Many thanks Vladimir,  exactly what I needed!