Hi,
I'm trying to add a new row to a child component (IgxRowIsland) of a hierarchical grid (IgxHierarchicalGrid), but am not able to succeed.
According to the documentation, there is a method that can be used to add a new row to the RowIsland like below:
const record = { ID: this.grid1.data[this.grid1.data.length - 1].ID + 1, Name: this.newRecord }; this.grid1.addRow(record);
However, during executing I'm getting the error that the data object is undefined, and that you cannot read length from the property undefined.
What am I doing wrong or is there a workaround?
See the example on stackblitz with the exact code I'm using: https://stackblitz.com/edit/addrowhierarchicalgrid
Thanks!
Hello Helene,
Thank you for posting in our forum.
Currently each child grid handles its own updating so if you want to add a row to a particular child grid you should get the child grid instance and call the addRow method on it.
You can use the onGridCreated event of the rowIsland to save all currently created children and their related parent id so that when add button is clicked in the parent you can get the correct child grid instance where the new row should be added.
In case child grid does not exist (has never been expanded) you can manually toggle the parent row to ensure child grid creation. Once you have the correct child grid instance you can call the addRow method on it.
I’ve modified your sample here for your refrence:
https://stackblitz.com/edit/addrowhierarchicalgrid-flfgln
Please refer to the sample and let me know if you have any questions.
Regards,
Maya Kirova
Hello Maya,
Thank you for the feedback and the additional insights. This is indeed working.
Maybe this can be added to the documentation for other users as well?
Thanks and kind regards!
Hélène
Hello Hélène,
Thank you for your suggestion.
You can log your improvement suggestions in the related github repository for the docs:
https://github.com/IgniteUI/igniteui-docfx/issues
In general, perhaps adding a separate section for adding new records for child grids here:
https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/editing.html#crud-operations
would be useful, however if you have been referring to some other part of the documentation that you find confusing or incomplete feel free to point it out when describing your improvement suggestion.