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"
}
}
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
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.
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.