Not respecting cell colors in flex grid when scrolling

Not respecting cell colors in flex grid when scrolling

Posted by: adminbursatec on 30 November 2020, 4:04 am EST

• 

  adminbursatec

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 November 2020, 4:04 am EST

  I need to use a different color in cells that have been edited (using flex-grid) but when I use the scroll (up to down or left to right) the grid is not respecting that cell color. I want to avoid that effect. I need the color to stay only in the edited cells (when I scroll the screen other cells are colored, even those that hadn’t been edited). You can reproduce the error in the next link (please use the scroll):
  
  https://jsfiddle.net/JParksGC/pj51anv3/

  P.S. I’m using Vue

• 

  adminbursatec

  • Post Options:
  • Link
    Copy

  Posted 30 November 2020, 4:14 am EST

  I already had an answer from Ashwin (wijmo TEAM):

  This issue happens because the FlexGrid recycles cells for better performance. The cell elements displayed on the DOM are not re-created every time the grid is refreshed or scrolled. Only the text inside the cells are updated. So, if you set the background of a cell, the same cell element is used, again and again, therefore displaying the background color for different data also. To resolve this issue, you can reset the background of the cell before assigning it again. So, if a cell does not require a background, it will be set to its original value and for the cell which requires background, its background will be updated accordingly. Please refer to the updated KB article sample below:

  https://jsfiddle.net/exgvncm4/5/

  In this sample, if you will edit any cell, its background will be set to green. Now, if you will scroll the grid, no other cell will display the background.

  THANKS