How to refresh a flexgrid table

How to refresh a flexgrid table

Posted by: sskss1ss2 on 13 March 2022, 9:37 am EST

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 13 March 2022, 9:37 am EST

  Hi,

  I’ve an enhancement where iam styling the flex grid cell based on some conditions. Iam setting the cell color as follows:

  cell.style.color = ‘#ffffff’;

  My query is that, the cell color applied stays even after the condition is removed. I treid refreshing the grid with refresh() method as well as invalidate(true). The latter does not have any effect and the former throws maximum stack size error.

  Thanks,

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 14 March 2022, 12:56 am EST

  Hello,

  The issue is arising becauses FlexGrid recycle and reuses the grid cells. So if we directly modify the style object to cells and then we also need to clear the style or set it to the default value. For example please refer to the following code snippet:

  
  if (panel.cellType == wijmo.grid.CellType.Cell
  && (c >= 18 && c <= 22)) {
  // set style
  var s = cell.style;
  s.color = '#ffffff';
  }else{
  // clear style
  var s = cell.style;
  s..color = 'unset'; //or set some default value
  }
  
  

  A better approach would be to add CSS classes to the cells and then apply the required style using the CSS. Also, Flexgrid automatically clears the classList of a cell during recycling of the cell so we don’t need to worry about clearing it ourselves as in the case of directly modifying the style object. Please refer to the following code snippet:

  
  if (panel.cellType == wijmo.grid.CellType.Cell
  && (c >= 18 && c <= 22)) {
  
  //var s = cell.style;
  //s.color = '#ffffff';
  //add class
  wijmo.addClass(cell, 'my-custom-color-cell');
  }
  
  // then in css
  .wj-cell.my-custom-color-cell{
  	color : '#ffffff';
  }
  
  

  Regards