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

Refreshing parent record when Child record updated and vice versa

1 Answer 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 06 Aug 2013, 07:32 AM
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.

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 08 Aug 2013, 06:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or