Refresh ChildGrid when adding a new record in parent grid

[Avinash]

Hi,

I have a EJ2 hierarchical grid in asp.net core 3.1 razor page. 

When I add a new record to the parent grid, I am also inserting a default value to the child tables.

When the insert is completed, the parent grid correctly shows the inserted record, but the child grid is blank.

When I reload the page, the child grid shows the data correctly from the table.

Can I do this refresh child grid automatically.

Thanks

Avinash Tauro

[Sujith Kumar Rajkumar]

Hi Avinash, 

Greetings from Syncfusion support. 

We checked your query and before proceeding further can you please confirm the below details so that we can understand your requirement clearly, 

• While adding a record in the parent, do you need to add record to the child only if it has been expanded initially or for both cases. If it has been expanded, the addRecord method can be used to add data to the particular child using the child grid instance. If not, then the child grid will not yet be created there so it needs to be pushed into the child grid’s dataSource.
• Please let us know how you are adding data to the child grid currently when parent data is added.

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Avinash]

Hi,

Sorry for the late response.

I am adding the parent record in the razor Insert handler using RemoteSaveAdaptor.

<e-data-manager adaptor="RemoteSaveAdaptor"

                        json="@Model.FundsCounterParentViewModels.ToArray()"

                        insertUrl="FundCounter?handler=Insert" />

In the Page model, I have the following method, where I insert the parent record, as well as insert > 1 child records.

public JsonResult OnPostInsert([FromBody] CRUDModel<FundsCounterParentViewModel> crudModel)

[Sujith Kumar Rajkumar]

Hi Avinash, 

 

Thanks for providing the details. 

 

We could understand that your requirement is to refresh the child grid also when a parent data is added(where you are adding child data). You can achieve this by refreshing the Grid in the actionComplete event handler when the request type is ‘save’ and action is ‘add’. This is demonstrated in the below code snippet, 

 

function actionComplete(args) { 

        if (args.requestType === "save" && args.action === "add") { 

            this.refresh(); 

        } 

} 

 

On refreshing, the Grid will be re-rendered and so all the expanded parent rows will be collapsed. So if you need to maintain these, it can be achieved by storing the expanded parent row indexes in a global variable before refreshing the Grid in its actionComplete event, and then expanding these in the same actionComplete event when request type is “refresh” by using a flag variable. The expand can be performed by passing the stored row index to the detail row module’s expand method. This is demonstrated in the below code snippet, 

 

var indexes; 

var expandFlag = false; 

 

function actionComplete(args) { 

    if (args.requestType === "save" && args.action === "add") { 

            // Expanded elements are retrieved using its class 

            var expandedElements = this.element.querySelectorAll('.e-detailrowexpand'); 

            indexes = []; 

            // Expanded element parent’s row index is pushed to global variable – “indexes” 

            expandedElements.forEach(ele => indexes.push(parseInt(ele.closest('.e-row').getAttribute("aria-rowindex")))) 

            // Flag is enabled and grid refreshed 

            expandFlag = true; 

            this.refresh(); 

    } 

        if (args.requestType === "refresh" && expandFlag) { 

            if (indexes.length !== 0) { 

                // Each index is expanded 

                indexes.forEach(ind => this.detailRowModule.expand(ind)); 

                indexes = []; 

            } 

        } 

} 

 

API links: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete 

                  https://ej2.syncfusion.com/documentation/api/grid/#refresh 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R