Refreshing parent record when Child record updated and vice versa

2 posts, 0 answers
  1. David
    David avatar
    7 posts
    Member since:
    Jul 2013

    Posted 06 Aug 2013 Link to this post

    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.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Aug 2013 Link to this post

    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!
Back to Top