Refreshing parent record when Child record updated and vice versa

[David]

I would like to update the parent grid when the child grid record is updated, is that possible?  If so could anyone provide any advice on it?  

Firstly I'm not sure which event would be best to use on the child grid. I want the child grid's CRUD action to fire, then load the contents of the parent again, preferably by Ajax.

Below is my grid as is:

@{
    ViewBag.Title = "Bills: Parent/Child";
}

<h2>Bills Index</h2>

@(Html.Kendo().Grid<BillParent>()
    .Name("BillParentsGrid")
    .Columns(columns =>
    {
        columns.Bound(h => h.Category);
        columns.Bound(h => h.Description);
        columns.Bound(h => h.Amount);
        columns.Command(command =>
        {
            command.Edit();
        }).Width(95);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(h => h.BillId);
            model.Field(h => h.BillId).Editable(false);
        })
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("BillParents_Read", "Bill"))
        .Update(update => update.Action("BillParent_Update", "Bill"))
    )
    .Events(events => events.DataBound("dataBound"))
    .ClientDetailTemplateId("BillChildren")

      )

<script id="BillChildren" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BillChild>()
          .Name("BillChildren_#=BillId#")
          .Columns(columns =>
          {
              columns.Bound(d => d.BillId).Width(50);
              columns.Bound(d => d.Description).Width(150);
              columns.Bound(d => d.Amount).Width(80);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              }).Width(55);
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .Model(model =>
              {
                  model.Id(d => d.BillId);
                  model.Field(d => d.BillId).Editable(false);
              })
            .Events(events => events.Error("error_handler"))
            .Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))
            .Update(update => update.Action("BillChild_Update", "Bill"))
            .Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))
            .Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill")))

          .ToolBar(tools => tools.Create())
          .ToClientTemplate()
          )
</script>

Many thanks.

[Petur Subev]

Hello David,

Basically you can use the requestEnd event of the inner (child) Grid to see if the operation that finished is a update/delete/create one. If so then you can use the dataSource.read() method of the outer Grid to refresh it too.

However keep in mind that once refreshed the expanded detail row will be lost.

Kind Regards,
Petur Subev
Telerik