Rajul Rajul - 2 months ago 35
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"
}
}


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

Answer

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.

Comments