This is a migrated thread and some comments may be shown as answers.

Grid binding to a One-to-many Model

2 Answers 217 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 20 Nov 2013, 05:04 PM
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

2 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 22 Nov 2013, 12:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christian
Top achievements
Rank 1
answered on 27 Nov 2013, 03:29 PM
Thanks Daniel, that appears to do the trick.
Tags
Grid
Asked by
Christian
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Christian
Top achievements
Rank 1
Share this question
or