Rajul Rajul - 1 year ago 168
Javascript Question

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

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"


Answer Source

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download