How to highlight unique cell in UI Grid using cellClass function?

Question

My requirement is that I am suppose to be highlighting specific cell by its row number and column number. But in given plunked when I scroll the grid other cell also getting highlighted. Looks like I have not understood UI grid cellClass method. Can anyone enlighten me? if my understanding is incorrect how will I achieve this functionality where only specific cell will be highlighted (ref to row number and column number.)

below is my core part of code and plunker.

var uniqueCellInfoArr = [{"row":2,"col":1},{"row":4,"col":1} ]
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
        {
          for (var i = 0; i < uniqueCellInfoArr.length; i++)
          {
            if ( uniqueCellInfoArr[i].row == rowRenderIndex &&  uniqueCellInfoArr[i].col == colRenderIndex)
            {
              return "red"
            }
          }

http://plnkr.co/edit/5xQoKiKIL8vY8EeLsJG5?p=preview

Answer 1

The rowRenderIndex, colRenderIndex is the index of the cell which are rendered in the table. When you scroll down, the cell are render again, so the indexes are rested.

A better solution is to highlight the cell based on it value, you can do it like this

var uniqueCellInfoArr = ['Velity','Suretech'];

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
    {
      var cellValue = grid.getCellValue(row, col);
      if(uniqueCellInfoArr.indexOf(cellValue) > -1) return 'red';
    }

Working plunker: http://plnkr.co/edit/g2QoWcWdP5FYKOwMOUm8?p=preview

Answer 2

At last i could solve this. I modified plunker with my solution.

http://plnkr.co/edit/UQu94rC5jxzYDZQQa5P4?p=preview

below property currentTopRow saved me.

rowRenderIndex = rowRenderIndex+grid.renderContainers.body.currentTopRow;

Every time rowRenderIndex was being reset while it was being scrolled. Adding this variable helped me to come out with fix location number hence only i could achieve specific cell being highlighted with row and col details.

Answer 3

I realize this post is over a year old, but it is misleading. The suggested answer is to just slap !important onto the field class and this really isn't necessary. The important rule should only be used when absolutely needed. A work around is to just raise the CSS specificity with the following to override any defaults:

.grid .ui-grid-row .red { color: red;  background-color: yellow; }
.grid .ui-grid-row .blue { color: blue;  }

See: Dynamic Cells Styling in ui-grid