For anyone attempting to use this approach, please be aware that it will not work. As soon as the row is re-rendered the formatting applied to the native element will be lost. This can be verified in the sample by simply scrolling down so the first few rows are no longer visible, and then scrolling back up.

It would be extremely helpful if Infragistics could provide the ability to specify row level classes based on content within that row.

Thank you for the sample. Unfortunately our grid definition is quite complex (frozen columns, grid columns dynamically served from the server side) and heavily reliant on templates, so I am not sure where exactly the breakdown happened.

And primarily because of the heavy reliance on templating, I don't think that we could (or would want to) try to build the column definitions in the oncolumninit method. So for now, we have selected a different vendor to provide this grid functionality.

Are there any plans on the horizon for addressing this? I have tried using the onColumnInit event, but it makes all of the parent grid's columns disappear.

If we can't resolve this issue, we are going to have to purchase and implement another angular grid.

Thank you for the sample.

One of the differences in our implementation is that we are assigning the new data set directly to the grid's data property. We did this because we were trying to resolve the issue reported in https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular/122820/issue-with-grid-row-selector-when-changing-from-no-records-in-the-grid-to-records-in-the-grid

(That is filed as a different user because that account is associated with our licenses and I didn't realize this account would be blocked from posting immediate content).

Unfortunately I can still reproduce this in our application when I remove the call to grid.cdr.detectChanges.

I suspect I know why this can't be reproduced in the sample:

In our application, the request that triggers the load is not in the same angular scope as the grid (the grid is hosted in an aspx page along with a bunch of other controls). I think that pressing the data button in the sample causes angular to trigger an independent change that happens to get the grid caught up in it. I believe this is why our call to grid.cdr.detectChanges works, but isn't required in the sample.

I think I may have found a solution based on the code sample in this forum post: https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular/122027/igxgriddetail-on-click-of-cell-child-row-should-expand

Adding a keydown event on the containing div seems to have solved the problem:

    <ng-template igxGridDetail let-dataItem *ngIf="useDetailsArea">
        <div style="width: 100%" (keydown)="$event.stopPropagation()">