FlexGrid cell styles adjusts on horizontal scroll

FlexGrid cell styles adjusts on horizontal scroll

Posted by: a.delacruz on 5 March 2019, 3:59 am EST

• 

  a.delacruz

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 March 2019, 3:59 am EST - Updated 3 October 2022, 8:10 pm EST

  Good Day!

  I have a FlexGrid that has styles(border, text color) on specific columns.
  
  I used the itemFormatter for the styles of each column.

  Initially the styles are displayed correctly on the corresponding columns.
  
  However, when I scroll to the right-most part of the table, the styles were set to other columns. Below are the attached images for reference.

  initial display

  

  1905×907 142 KB

  after scroll

  

  1905×906 90.7 KB

  itemFormatter code snippet

  	if (panel.cellType == wijmo.grid.CellType.Cell
  			&& (c >= 18 && c <= 22)) {
  		
  		var s = cell.style;
  		s.borderRight = "2px solid blue";
  	}
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 March 2019, 3:01 am EST

  Hi,

  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. 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.borderRight = "2px solid blue";
  }else{
  // clear style
  var s = cell.style;
  s.borderRight = null; //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.borderRight = "2px solid blue";
  //add class
  wijmo.addClass(cell, 'my-custom-border-cell');
  }
  
  // then in css
  .wj-cell.my-custom-border-cell{
  	border-right: 2px solid blue;
  }
  

  ~Sharad

• 

  a.delacruz

  • Post Options:
  • Link
    Copy

  Posted 6 March 2019, 5:26 am EST

  Hello,
  
  Thank you for that explanation. Now I understand why it happened.
  
  I’ll implement the solution you provided.

  Regards,
  
  Cesca