Issue with Master and Detail Grid

[Shawn]

The master grid is not recognized as a master grid.

Detail Template

<script id="inviteehistorytemplate" type="text/x-kendo-template">
    @(Html.Kendo().Grid<BusinessEntities.ChangeHistory>()
        .Name("grid_#=EventID#") // make sure the Name is unuque
        .Columns(c =>
        {
            c.Bound(h => h.FieldName);
            c.Bound(h => h.NewValue);
            c.Bound(h => h.OldValue);
            c.Bound(h => h.UpdatedBy);
            c.Bound(h => h.UpdatedOn);
        })
    .DataSource(dataSource =>
        // Make request to GetInviteeChangeHistory and provide the current ContactID as a route parameter
        dataSource
        .Ajax()
        .Read(read => read.Action("GetInviteeChangeHistory", "Contacts", new { contactId = Model.Contact.ContactID, eventId = "#=EventID#" }))
    )
        .Scrollable()
        .ToClientTemplate()
    )
</script>

Master grid code. Grid is populated by the model.

 

@(Html.Kendo().Grid(Model.EventHistory)
    .Name("contacteventhistorygrid")
    .Sortable()
    .Scrollable()
    .ClientDetailTemplateId("inviteehistorytemplate")
    .NoRecords()
    .HtmlAttributes(new { @class = "eb-table-header" })
    .Columns(c =>
        {
            c.Bound(e => e.EventID).Title("Event ID");
            c.Bound(e => e.EventDate).Title("Event Date").Format("{0: MM/dd/yyyy}");
            c.Bound(e => e.Name).Title("Event Name");
            c.Bound(e => e.TotalSeats).Title("Total Seats");
            c.Bound(e => e.PartyVenue2).Title("Theatre");
            c.Bound(e => e.PartyVenue1).Title("Party Venue");
        })

    .Events(events => events.DataBound("Contacts.fn.eventhistory_DataBound"))
)

JavaScript

 

eventhistory_DataBound: function (e) {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
}

Screenshot of the results

 

[Shawn]

Solved this issue by adding a DataSource to the master grid.