Grid binding to a One-to-many Model

[Christian]

Hi All

I'm trying to get the Kendo Grid to display with a hierarchical row displaying history data for a given row.
My colleague has setup the project with the primary model having a  one to many relationship to the second model.
Models are as follows:

public class CrossReferenceRelationship
    {
        public int Id { get; set; }
        [Display(Name = "From Partner")]
        public string FromPartner { get; set; }
        [Display(Name = "To Partner")]
        public string ToPartner { get; set; }
        [Display(Name = "From Role")]
        public string FromRole { get; set; }
        [Display(Name = "From Account")]
        public string FromAccount { get; set; }
        [Display(Name = "To Account")]
        public string ToAccount { get; set; }
        [Display(Name = "Is Deleted")]
        public bool IsDeleted { get; set; }
        public ICollection<CrossReferenceRelationshipHistoricEntry> HistoricEntries { get; set; }
    }

public class CrossReferenceRelationshipHistoricEntry
{
    public int Id { get; set; }
    public int XrefId { get; set; }
    [Display(Name = "From Partner")]
    public string FromPartner { get; set; }
    [Display(Name = "To Partner")]
    public string ToPartner { get; set; }
    [Display(Name = "From Role")]
    public string FromRole { get; set; }
    [Display(Name = "From Account")]
    public string FromAccount { get; set; }
    [Display(Name = "To Account")]
    public string ToAccount { get; set; }
    [Display(Name = "Action Type")]
    public string ActionType { get; set; }
    [Display(Name = "Method Used")]
    public string MethodUsed { get; set; }
    [Display(Name = "Modified By")]
    public string ModifiedBy { get; set; }
    [Display(Name = "Modified Datetime")]
    public DateTime ModifiedDatetime { get; set; }
}

He then maps these using EntityMapper, populating these objects.
So far my view contains the following code for the Kendo grid:

@(Html.Kendo()
    .Grid(Model)
    .Name("adminGrid")
    .Columns(columns =>
    {
        columns.Bound(crr => crr.Id).Filterable(false).Width(100);
        columns.Bound(crr => crr.FromPartner).Width(200);
        columns.Bound(crr => crr.FromAccount).Width(200);
        columns.Bound(crr => crr.ToPartner).Width(200);
        columns.Bound(crr => crr.ToAccount).Width(150);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .ClientDetailTemplateId("HistoricEntries")
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .Events(events => events.DataBound("dataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(crr => crr.Id))
        .Create(update => update.Action("Partner_Create", "CrossReferenceRelationship"))
        .Read(read => read.Action("Read", "CrossReferenceRelationship"))
        .Update(update => update.Action("Update", "CrossReferenceRelationship"))
        .Destroy(update => update.Action("Delete", "CrossReferenceRelationship"))
        )
    )
    <script id="HistoricEntries" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<CrossReferencePortal.Models.CrossReferenceRelationshipHistoricEntry>()
        .Name("historyGrid_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(he => he.FromPartner);
            columns.Bound(he => he.FromAccount);
            columns.Bound(he => he.ToPartner);
            columns.Bound(he => he.ToAccount);
            columns.Bound(he => he.FromRole);
            columns.Bound(he => he.ActionType);
            columns.Bound(he => he.MethodUsed);
            columns.Bound(he => he.ModifiedBy);
            columns.Bound(he => he.ModifiedDatetime);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Read(read => read.Action("HistoryRead", "CrossReferenceRelationship", new { Id = "#=Id#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
    </script>

I feel I should be able to bind the history grid to the primary grid's Model, so that I can simple expose the HistoricEntries e.g. 
crr.HistoricEntries

Is this possible and are there any examples showing something similar?

Many thanks
Christian

[Daniel]

Hello Christian,

I posted my reply in the support ticket that you have opened on the same topic. For convenience, I am also pasting it here:

The detail Grid data can be set from the parent model via the configuration only when using server hierarchy. This is not supported out of the box when using an Ajax hierarchy, but it is possible to implement it by using the detailIniit event to set the detail Grid dataSource data e.g.

<script id="HistoricEntries" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<CrossReferencePortal.Models.CrossReferenceRelationshipHistoricEntry>()
        .Name("historyGrid_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(he => he.FromPartner);
            columns.Bound(he => he.FromAccount);
            columns.Bound(he => he.ToPartner);
            columns.Bound(he => he.ToAccount);
            columns.Bound(he => he.FromRole);
            columns.Bound(he => he.ActionType);
            columns.Bound(he => he.MethodUsed);
            columns.Bound(he => he.ModifiedBy);
            columns.Bound(he => he.ModifiedDatetime);
        })
        //prevent the initial binding to avoid a request to be made to the server
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            //enable client operations
            .ServerOperation(false)
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
</script>

<script type="text/javascript">
    function detailInit(e) {
        var detailGrid = e.detailCell.find("[data-role=grid]").data("kendoGrid");
        detailGrid.dataSource.data(e.data.HistoricEntries);
    }
</script>

Regards,
Daniel
Telerik

[Christian]

Thanks Daniel, that appears to do the trick.