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

ASP.NET Core Grid - Foreign Key Relationship Example

1 Answer 182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shaylon
Top achievements
Rank 1
Shaylon asked on 13 Jun 2017, 09:18 PM

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.

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 16 Jun 2017, 12:09 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Shaylon
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or