addRecord() on childGrid

[Fabio]

I am using a Grid which has a ChildGrid both with inline edit mode.

With "this.grid.addRecord()", I can add a new row in the Parent Grid from my .ts file.

I wish I could also add a record to the Child Grid with the addRecord() function indicating the index of the Parent Row.

How can I do?

Thanks

[Sujith Kumar Rajkumar]

Hi Fabio, 

Greetings from Syncfusion support. 

The child Grid will only be rendered on expanding the parent row which is the default behavior. So if the child Grid is in expanded state you can access its instance and add a new record using the addRecord method but if it is collapsed then you would have to push the new child data to the child Grid’s data source and refresh the entire parent Grid in order for the updated changes to be reflected in the child Grid. So before proceeding with the query please confirm us the following information, 

• Is your requirement to add a new data to the child Grid immediately after adding a data to the parent Grid?
• If not is your requirement to dynamically add data(on button click or from event action) to expanded/collapsed child Grids.
• Please elaborate on your exact use case scenario.

If your requirement does not come under the above cases or if you wish to share us any additional information regarding your requirement, then please share us the same to validate further. 

Regards, 

Sujith R 

[Fabio]

Yes, my requirement is to add a new data to the child Grid immediately after adding a data to the parent Grid

[Sujith Kumar Rajkumar]

Hi Fabio, 

 

Thanks for the confirmation. 

 

You can achieve this requirement by pushing the new child data for the newly added parent row from the parent Grid’s actionComplete event(Triggers when a Grid action is completed successfully). This needs to be done when the event arguments - requestType is ‘save’ and the action is ‘add’ as demonstrated in the below code snippet, 

 

// Parent Grid’s actionComplete event handler 

actionComplete(args) { 

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

        // The queryString field value(that establishes the relation between parent and child row) is added to the new child data 

        var employeeIdVal = args.data['EmployeeID']; 

        // A unique primary key value is generated for the new child data 

        var primaryKeyVal = parseInt((Math.random() * 1000).toString()); 

        // Child data object is formed 

        var newDat = { EmployeeID: employeeIdVal, OrderID: primaryKeyVal, ... }; 

        // The new child data is pushed to the childGrid’s dataSource property 

        this.gridObj.childGrid.dataSource.push(newDat); 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-yvt5sx?file=app.component.ts 

 

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

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Fabio]

You set newDat manually from code. I want that after save parenRow, his childGrid action begin "Edit" for the user to create childRow

Thanks

[Sujith Kumar Rajkumar]

Hi Fabio, 

 

From the provided information we suspect that your requirement is to form the child data based on the newly added parent data. If so, this newly added data can be accessed from the actionComplete event arguments as shown in the below image, 

 

 

 

So using this parent data you can form your child data as required and add it to the child Grid’s data source. 

 

If this is not your requirement then please elaborate on it with pictorial representation(if possible) to validate further based on that. 

 

Regards, 

Sujith R  

[Fabio]

Hi,

No, my requirement is add a new row of childgrid from .ts file. In this stackblitz, the onClick() function I add a record in my parentGrid.

The same thing I would like to do for childGrid. 

Specifying the Parent Row, I would like to execute the addRecord function for Child Grid

https://stackblitz.com/edit/angular-yvt5sx-5cmkir?file=app.component.ts

[Sujith Kumar Rajkumar]

Hi Fabio, 

 

Sorry for misunderstanding your query. 

 

For adding a new record to the child Grid using button click, the parent row needs to be expanded first and then the addRecord method needs to be called using its corresponding child Grid instance. So you can achieve this case by initially expanding the required parent row(where you need to add record for the child Grid) by passing the parent row index to the expand method of the detailRowModule and then in a timeout function(so that the child Grid can be initialized) the addRecord can be called on the child Grid instance. 

 

This is demonstrated in the below code snippet, 

 

// Button click event function 

addChildRecord() { 

    // The parent row of index – 0 is expanded 

    this.gridObj.detailRowModule.expand(0); 

    setTimeout(function () { 

        // The expanded parent row element is retrieved using its index 

        var parentRow = this.gridObj.getRowByIndex(0); 

        // The child Grid will be rendered as the parent row’s next sibling element 

        // So using this the child Grid instance is retrieved 

        var childGridInst = parentRow.nextElementSibling.querySelector('.e-grid').ej2_instances[0]; 

        // Now a new record is added to the child Grid 

        childGridInst.addRecord(); 

    }.bind(this), 100); 

} 

 

We have modified the shared sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-yvt5sx-kkruaq?file=app.component.ts 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R