Appreciate the answer.  I had to switch over to setting a primaryKey.  I was hoping to avoid it so as to avoid some refactoring.  Not having the full row information in the onGridCreated event parentId field is also not ideal (instead now all it gives is the primaryKey) so I have to go looking for it.

Anyways, I do appreciate all the help, I finally got my application in a working state, so thank you.

Hey Maya,

Thanks for the response, that got me what I needed.  I am running into a problem with attempting to remove rows that I am hoping you could help me with.

The problem I am running into is that when I open a child grid on a row, and then select the main grid row immediately underneath the generated child grid, when I attempt to remove that row, it tells me Delete is not a function.  When looking at what is being grabbed, it appears that when attempting to grab a main grid row that comes immediately after a child grid by Index is resulting in pulling in the IgxChildGridRowComponent instead of the IgxHierarchicalRowComponent.  I'm not sure if this is intentional or not, but basically I cannot delete a Main Grid row if it comes after a main grid row that has open it's child grid. If I close the grid, then it works like I expect.

I'm probably going to try deleting via a this.grid.data.splice(index, 1) instead and force an update, I'm just curious if this is intentional or a bug of some variety?

Sorry one more question, how would I go about figuring out how to get the row index of a selection in one of the children grids?

Right now, what I am doing in my method tied to the onGridCreated event is pushing the grid that the event has into an array, so that I can go back and reference it later.  So then when I do an Event of some variety (Save, Delete, Create) from my toolbar at the top of the page, I can loop through every grid available to check whether or not a grid has active selections by using the this.grid.selectedRows() method and do the corresponding action to the selected row or rows.

The problem I'm running into is that the grid.selectedRows() method just gives me back the JSON data for that particular row.  I have no idea which index that data lives on in the grid which I need to be able to figure out if I want to do a Creation Above or Below the selected row in that particular grid. 

Now this isn't an issue in the top level grid, since the top level data has a unique data _id field that is provided by our data that I can search for by looping through my main array tied to the top level array.  However, the child array within each main data object has no such unique id and could carry duplicate data (which is the same with the child array of the child array).

So, is there a method I'm not seeing that would give me the row index(es) of all the selected rows within the child grids?  Or am I going to need to put a unique identifier on every single object in each of the children arrays and children's children arrays?

I appreciate the information, I ended up figuring out the problem I was having with rowSelectable and rowEditable.  It appears, both will work when the primaryKey is in [primaryKey] = " '_id' " with the extra apostrophes. 

The problem I was running into was an oversight on my part with regards to newly created items in the grid.  They wouldn't have had an _id property since they had not be saved to our database and acquired an id.

Thanks for all your help.

A couple more Hierarchical Grid questions if you don't mind as well:

For reference, I am currently using IgniteUI-Angular version 7.2.3.

Is there a way to enable both rowEditable and rowSelection? Currently, it seems if I try to enable both, one or the other does not like the way I specify primaryKey – rowSelectable seems to want primary key in the following format: [primaryKey]="_id" while rowEditable seems to want it to have the additional apostrophes surrounding the _id, ie [primaryKey]=" '_id' ".

Second Question: does the onRowSelectionChange and onSelection events actually fire for an igx-row-island? I can't seem to get these events to fire when I make a row selection, only the events tied to the top level igx-hierachical-grid seem to fire.  I can't seem to find any examples in the current documentation demonstrating a igx-row-island with a selection event.

To be honest, I was surprised this worked based on the behavior I was seeing when directly manipulating the data object.

Can you tell me why is it that directly manipulating the order in this manner works and will update the table display appropriately when it doesn't work when I do something like this.data.unshift(this.product) or this.data.push?  When I do the later, the data object of course updates correctly, but the table doesn't seem to detect the change and won't update the display.  Does addRow somehow cause the Grid to launch a change detection of some variety for some specified time?  Honestly, I was expecting to have to do something like:

this.data.unshift(stuff);

this.grid.addRow(stuff);

this.grid.deleteRow(this.data.length-1)