I am trying to add a Visual Indicator to any cell that is edited but hasn't had the corresponding change saved to our database.  I'm using the onCellEdit event to apply a custom 'edited-border' class that is changing the cell border to a 2px black or white dashed border depending on theme.

To do this dynamically, I am doing something like below which is tied to the onCellEdit event on my row-islands and heirarchical-grid html elements:

editDone(event){

   if(event.newValue !== event.oldValue){

       var cell = event.owner.getCellByKey(event.rowID, event.owner.columns[event.cellID.columnID].field);

       cell.nativeElement.classList.add('edited-border');

   }

}

The above code works just fine, until I start expanding rows to view child grids.  So for example if I were to have two entries in a Heirarchical grid, if I were to edit any field on the bottom entry, the style would apply.  If I were to then open up the child grid of the top entry, the style would then disappear.  As far as I can tell, it looks like the grid is changing the bottom row's style to match the odd row styling which removes any existing classes I have applied.  When I close the opened child grid, the 'edited-border' style will actually come back, so it looks like it is at least holding the original classes somehow.

How would I go about applying the edited-border class when a rowExpansion occurs? I thought about maybe holding onto every Cell I edit and trying to reapply, the problem I have is I can't figure out what event to use.  It doesn't look like there is an onRowExpansion event I can use.

We are using Ignite Angular v8.2.2.

Any insight would be appreciated,

Thanks,

-Randall