Refresh (update) child from (grand)child update

[Walter Konnerth]

Hi,

I have a grid with a child with a child (a grid with grandchildren).

The grid with the children and grandchildren have a remote data source.

I would like to achieve following:

- on grand child editing, to refresh only the parent row (the parent row of the grand child)

- on child editing, to refresh only the parent row (the parent row of the child).

I've found the example about refreshing the main grid on the actionComplete action of the childrend / grandchildren, but this is refreshing the whole grid and collapsing the children / grandchildren.

Is it possible to have only the parent ro refreshed?

If not, how can I reopen the children / grandchildren (on which the update was made) after a grid refresh?

Thanks,

[Thiyagu Subramani]

Hi Walter, 

Thanks for contacting Syncfusion forum. 

Based on your shared information we suspect the you want to refresh the parent grid after editing the child grid without refreshing the whole grid and also avoid the collapsing the children/grandchildren. 

To achieve this we suggest you to use the Grid’s setRowData method as demonstrated in the below code snippet. Because while using setRowData Method updates and refresh the particular row values based on the given primary key value. 

Please refer to the below code and sample link. 

function actionBegin (args) { 

        if (args.requestType === "save") {  // it’s triggered when updating the data in child grid row 

          var child = args.form.closest(".e-grid");  // get required child grid element 

          var row = child.closest("tr").previousElementSibling;  // get required parent grid for child grid. 

          var parent = child.parentElement.closest(".e-grid"); 

        // Refreshed parent grid value without refreshing the whole grid. 

          var rowInfo = parent.ej2_instances[0].getRowInfo(row); 

          rowInfo.rowData.ShipName = "text"; 

          parent.ej2_instances[0].setRowData(rowInfo.rowData[parent.ej2_instances[0].getPrimaryKeyFieldNames()[0]], rowInfo.rowData); 

        } 

      }, 

Likewise you can achieve your requirement for required child grids. 

Sample link: https://stackblitz.com/edit/g4slns-n5sy31?file=index.js 

API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#setrowdata 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Walter Konnerth]

Hi,

Thanks for the example, it works OK!

Question: how could I have the same functionality if the edit mode is DIALOG?

Thanks,

[Thiyagu Subramani]

Hi Walter, 

Thanks for your update. 

Query: how could I have the same functionality if the edit mode is DIALOG? 

 

We can achieve this requirement(both Normal and Dialog editing mode) by using below code in actionComplete event instead of actionBegin even and we have found closest grid, from row element instead of edit form element.  

 

Please refer to the below code and sample link.  

actionComplete: function(args) { 

      if (args.requestType === "save") { 

        var child = args.row.closest(".e-grid"); 

        var row = child.closest("tr").previousElementSibling; 

        var parent = child.parentElement.closest(".e-grid"); 

        var rowInfo = parent.ej2_instances[0].getRowInfo(row); 

        rowInfo.rowData.FirstName = "Text"; 

        parent.ej2_instances[0].setRowData( 

          rowInfo.rowData[parent.ej2_instances[0].getPrimaryKeyFieldNames()[0]], 

          rowInfo.rowData 

        ); 

      } 

    }, 

Sample link: https://stackblitz.com/edit/g4slns-h4sut2?file=index.js 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Walter Konnerth]

Hi,

Thanks for the example!

It works OK for editing a record, but not for a new record.

I tried in your example and if I add a new record it is not displayed and in my code  args.row

is undefined.

Can you please help me out?

Thanks,

[Walter Konnerth]

.. and also how can I achieve this when a delete is triggered?

[Thiyagu Subramani]

Hi Walter, 

Thanks for your update. 

To achieve your requirement we suggest you to use the actionBegin event of EJ2 Grid.  In this event we have found required grid element based on args.requestType and please refer to the below code and sample link. 

actionBegin: function (args) { 

      var child; 

      if (args.requestType === "save" || args.requestType === "delete") { 

        if (args.requestType === "save") { 

          var child = document.getElementById(args.form.id.split("EditForm")[0]); 

        } 

        if (args.requestType === "delete") { 

          var child = args.tr[0].closest('.e-grid'); 

        } 

        var row = child.closest("tr").previousElementSibling; 

        var parent = child.parentElement.closest(".e-grid"); 

        var rowInfo = parent.ej2_instances[0].getRowInfo(row); 

        rowInfo.rowData.ShipName = "text"; 

        parent.ej2_instances[0].setRowData( 

          rowInfo.rowData[ 

          parent.ej2_instances[0].getPrimaryKeyFieldNames()[0] 

          ], 

          rowInfo.rowData 

        ); 

      } 

Sample link: https://stackblitz.com/edit/g4slns-5mgyug?file=index.js 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Walter Konnerth]

Thanks for th example, it did the trick!

[Thiyagu Subramani]

Hi Walter, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S