Igniteui-angular: Provide means to add class to specific row within igx-grid

[rkara]

Description

Developers are unable to add a class to an IgxGridRowComponent via the provided API.

• igniteui-angular version: 6.1.6
• browser: Google Chrome 69.0.3497.100 (Official Build) (64-bit)

Steps to reproduce

1. Setup an app to add a class to a row element using the nativeElement
2. Scroll the data grid
3. Notice the class is removed

Code sample available at https://stackblitz.com/edit/ignite-grid-example

Result

Class added via nativeElement on row object is removed automatically when the user scrolls

Expected result

Class should remain on the element, or provide a way in the API to properly add a class that will stick regardless of if the user scrolls or not.

Use Case

Developer wants to differentiate row for the user.

[bkulov]

@rkara Do you need means to make a row visually distinguished from the others? In v6.2.0 beta 3 we've implemented a feature called 'conditional cell styling'. It could be used to apply a given class to given cells.
The documentation is not yet publicly available but you could take a look at the sample we've created:
https://github.com/IgniteUI/igniteui-angular-samples/tree/master/src/app/grid/grid-conditional-cell-style

The idea is to provide an array of key-value pairs, containing a class and corresponding function. If the function returns true the class would be applied to that cell. This array of key-value pairs is set for each column. This means that if you want to style entire rows you'll have to provide the same array to all columns in the the grid.

If you need the class applied to a given row for some other reason let us know and we'll add this feature to our road map.

[rkara]

@bkulov that completely resolves my issue! Thank you for the help!