Flexgrid Styles misapplied while scrolling

Flexgrid Styles misapplied while scrolling

Posted by: joe on 21 August 2019, 3:11 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 August 2019, 3:11 pm EST

  Hi!

  I’ve researched this topic and found this thread:
  
  https://www.grapecity.com/forums/wijmo/flexgrid-scrolling-error_1

  And I don’t understand the solution there.

  The author describes exactly the problem I’m seeing on my own grid. I’m using AngularJS. To reiterate the problem: I set the background color of some cells according to the value contained in the cell (I set the background color of cells with higher values and do not set the background color of cells with lower values). This works exactly as I intended but when I scroll the grid vertically or horizontally, the background colors of other cells change.

  Here is my code:

      grid.itemFormatter = function (panel, r, c, cell) {
        if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].header != SOME_TEXT) {
          if (Number(grid.getCellData(r, c, false) >= SOME_VALUE_THRESHOLD) {
            cell.style.backgroundColor = '#fd8d18';
          }
        }
      }
  
  

  I understand the grid “recycles cells” but I don’t know what that means or how to work around it. Your help is appreciated.

  Joe

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 August 2019, 1:33 am EST

  Hey Joe,

  The FlexGrid “recycle cells” means that the cell elements of the grid are only created once and all the updates to the grid are changed inside the cell element instead of recreating them. For eg, if you scroll the grid, the data inside the cells is updated but the cell elements remain the same.
  
  Therefore, in your case, since the cell elements are the same, their background remains the same after scrolling.
  
  To avoid this issue, either reset the background the cells like this:

  if (Number(grid.getCellData(r, c, false) >= SOME_VALUE_THRESHOLD) {
            cell.style.backgroundColor = '#fd8d18';
  }
  else {
  	cell.style.backgroundColor = null;	
  }
  

  Or add all of the styles to a CSS class and toggle the class according to the value:

  var data = Number(grid.getCellData(r, c, false));
  wijmo.toggleClass(cell, 'custom-class', data >= SOME_VALUE_THRESHOLD);
  
  .custom-class {
  	background-color: #fd8d18;
  }
  

  Please refer to the sample below for reference:

  https://stackblitz.com/edit/angularjs-xl5ief

  Regards,
  
  Ashwin

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 22 August 2019, 9:17 am EST

  Thank you, Ashwin! I get it now and the solution was quite simple!

  Joe