Highlighting a row based on its ID value in a column

Hi, does anyone know what the best solution is for making the grid, upon loading, highlight a row (or all rows) containing a certain value in the Id column?

Hello Anne,

Thank you for posting to Infragistics Community!

I have been looking at your question and I have prepared a small sample in order to demonstrate how such behavior could be achieved. An approach I could suggest in order to highlight certain rows based on some condition (i.e. value) is to use the igx-grid conditional cell styling and set either cellClasses or cellStyles properties.

In the attached sample I am using cellClasses property and on columnInit event I am highlighting the row with ID 3 by assigning the object literal backgroundClasses to the column object.

More information about conditional styling, which you might consider helpful could be found here.

Additionally, another possible approach introduced in version 12.2.0 is using rowStyles or rowClasses properties like follows:

In the attached sample I am highlighting the row with ID 6 using the above approach:

 

// component.html

// component.ts
public rowClasses = {
    highlightedRow: (row: RowType) => row.rowID === 6
};

highlightedRow is a CSS class, where the desired styling could be applied:

::ng-deep {
  .highlightedRow {
     background-color: #fec8e0;
  }
}

In case you require to override the default styles applied on hovering or selection I could suggest something similar like the following:

 

.highlightedRow:hover {
    background-color: #fbbbd8;
}

.highlightedRow .igx-grid__td--selected {
    background-color: #efa9c9;
}

Please test these approaches on your side and let me know if you need any further assistance.

Looking forward to hearing from you.

Sincerely,
Riva Ivanova
Entry Level Software Developer