FLexGrid fixed height highlight / hover row issue when scrolling

FLexGrid fixed height highlight / hover row issue when scrolling

Posted by: wissam-hobeika on 14 September 2017, 11:42 am EST

• 

  wissam-hobeika

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:42 am EST

  Hi there,

  I am using Wijmo 5 Purely JS (no frameworks) / Typescript in one my projects and have a fixed height for a Flexgrid to enable scrolling over a large dataset.
  
  I have enabled row highlighting on hover and it’s working perfectly when no scrolling is in effect.

  The minute I start to scroll up and down a few times, the whole row highlight gets duplicated as if the calculation of the row is not being up to speed and the class ‘wj-highlight-row’ gets applied over and over across several rows.

  I’d appreciate any help or pointers around this issue.

  Thanks,
  
  W

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:42 am EST

  Hi,

  Sorry for the late reply, could you please share a sample for the issue so that we can investigate this as we are not able to reproduce this at our end.

  Thanks,
  
  Abhishek

• 

  skoppula

  • Post Options:
  • Link
    Copy

  Posted 6 June 2020, 12:20 am EST

  Hello There,

  I am running into some weird issues with hover when mouse scroll is used. I have a requirement to display pop overs on hover only for specific columns and everything works good when I apply the hover on a grid with auto scroll enabled. When I scroll over the grid the hover automatically applies to all the columns instead of fixed columns that I set before.

  I hope I find a resolution to this issue.

  Thanks in advance,
  
  Shashank

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 June 2020, 1:23 am EST

  Hi Shashank,

  Can you let us know how are you displaying the tooltip? If you are using setTooltip method in the formatItem or itemFormatter, then this is an expected behavior because flexgrid recycles the cells. This means if a cell (0, 0) is scrolled and a new cell (0, 10) is displayed in the place where (0, 0) cell was displayed, the div element of both the cells is same. Only the data is updated on the cell element.

  This may be the reason of the issue. You must have applied the tooltip to a particular column but may not have removed it from the non tooltip column. So, for the columns on which the tooltip is not required, you need to reset it.

  grid.formatItem = (s, e) => {
  	if(/* tooltip is required */) {
  		tooltip.setTooltip(e.cell, 'tooltip');
  	}
  	else {
  		tooltip.setTooltip(e.cell, null); // remove the tooltip
  	}
  }
  

  Regards,
  
  Ashwin