ASP.NET Core Grid - Foreign Key Relationship Example

[Shaylon]

I'm needing an example for creating an inline-editable grid that consists of a transaction (parent) and items in that transaction (children).  Upon accessing the grid, it should be empty as this is a new transaction.  Because it is new, the transaction will need to be created and then the items will be added and displayed on the grid.  Once the user has added all necessary items, they click save to submit the new transaction and it's items.

I was able to create the grid, but could never link child with parent.  I spent some time with this example here (http://demos.telerik.com/aspnet-core/grid/foreignkeycolumn), but it assumes that the parent (Categories) listing already exists, whereas I need to create the parent and children together.

[Boyan Dimitrov]

Hello Shaylon,

It is possible to populate the child (detail) grid with items from its parent data item. Please refer to the code snippets below: 

For example this is how the parent grid looks like: 

@(Html.Kendo().Grid(@Model.Modifications)
      .Name("Modifications")
      ...
      .ToolBar(t=>t.Excel())
      .ClientDetailTemplateId("first-nested-grid")
      .Events(ev => ev.DetailInit("detailInit"))
      .DataSource(ds => ds.Ajax().PageSize(50).ServerOperation(false))
      ....
)

In the template you can define your child grid: 

<script id="first-nested-grid" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Aviva.CreditRisk.CPM.Model.AmortisingSchedule>()
                                .Name("ScheduleGrid_#=Id#")
        .DataSource(ds => ds.Ajax().PageSize(50).ServerOperation(false))
        .Columns(columns => columns.Bound(x => x.InstrumentAttributeId).Width(50))
            //        .Sortable()
            //      .Navigatable()
        .ToClientTemplate()
    ).

</script>

and then subscribe to the detailInit event of the the grid in order to populate the child grid with items stored in the parent model: 

<script type="text/javascript">
    function detailInit(e) {
       // I assume that Modification object has an Id property
        var childGrid = $("#ScheduleGrid_" + e.data.Id).data("kendoGrid");
        //I assume that the current Modification object has a child list of items under the AmortisingSchedule property
        var childData = e.data.AmortisingSchedule;
        childGrid.dataSource.data(childData);
    }
</script>

Regards,
Boyan Dimitrov
Progress Telerik