Kendo UI JQuery Grid. How to refresh child rows without reloading the grid.

[Marc]

Hi,

I have a grid of "batches" with nested "test plans".
It works with a typical detailInit function which loads the test plans for each batch.
A bit of navigation is added to view and edit the test plans. 

All that works well, but it can be repetitive to create the test plan and all its details, so I added a [New from template] button, visible when a batch is "open" in the grid to perform a whole series of updates to form an entire complex test plan in one click.

The issue I have is that once all is created and I detect success, I don't know how to just refresh the detail of the batch.
If I reload the grid entirely, that works well (see below), but it is not a pleasant user experience.
I would love to "just refresh" the children rows and see the new child row appear under the last one without reloading the grid, this way the user would click and immediately see the result.

This different from "just adding" a test plan (that part works well using normal detailInit), because I create a whole lot of grand-children rows, so I have several ajax calls to create grand-children and the process is complete once all the grand-children are created. The "batch grid" is unaware of these grand-children.    

 

 

 

[Marc]

I ended up adapting the solution from this article https://docs.telerik.com/kendo-ui/knowledge-base/refresh-grid-in-detail-template