FlexSheet: need help with tool-tip display

FlexSheet: need help with tool-tip display

Posted by: chetan.shetty on 9 July 2019, 10:25 am EST

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 9 July 2019, 10:25 am EST

  Hi,
  
  I have implemented tool-tip for each of the cells in the grid in the following manner:

  let range = null;
  		const tooltip = new wjcCore.Tooltip();
  		this.flexSheetIntro.hostElement.addEventListener('mousemove', (e) => {
  			const _ht = this.flexSheetIntro.hitTest(e);
  			if (!_ht.range.equals(range)) {
  				// new cell selected , show tooltip
  				if (_ht.cellType == wjcGrid.CellType.Cell) {
  					range = _ht.range;
  					const cellBounds = this.flexSheetIntro.getCellBoundingRect(_ht.row, _ht.col);
  					const data = wjcCore.escapeHtml(this.flexSheetIntro.getCellData(range.row, range.col, true));
  					tooltip.setTooltip(this.flexSheetIntro.hostElement, data);
  					tooltip.show(this.flexSheetIntro.hostElement, data, cellBounds);
  				}
  			}
  		});
  		this.flexSheetIntro.hostElement.addEventListener('mouseout', (e) => {
  			tooltip.hide();
  		});
  

  1. What I want is that the tool-tip for computed columns show the formula instead of the value.
  2. Another problem is the positioning of tool-tip shifts to the center of the grid in certain scenarios. [Attaching screenshots in below comment]
• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 9 July 2019, 10:26 am EST - Updated 3 October 2022, 7:52 pm EST

  

  297×628 28.5 KB

  

  942×524 68.8 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2019, 6:15 am EST

  Hi Chetan,

  1. To show formula instead of the value on calculated columns, you may prevent the data from formatted in the tooltip by setting the third parameter of the getCellData method to false and converting it to a string:

  const data = wjcCore.escapeHtml(this.flexSheetIntro.getCellData(range.row, range.col, [b]false[/b]).toString());
  

  I will also recommend you to only use the show method of ToolTip class to show the tooltip and instead of using the cell bounds, you may directly use the cell element on which you wish to show the tooltip. Please refer to the code snippet below:

  if (hti.cellType == wjcGrid.CellType.Cell) {
            range = hti.range;
            var cell = hti.panel.getCellElement(hti.row, hti.col);
            tooltip.show(cell, hti.panel.getCellData(hti.row, hti.col, false).toString());
  }
  

  You may also refer to the sample provided at the bottom.

  2. We are sorry but we were not able to replicate the issue at our end. Please refer to the sample below on which we tried to replicate the issue. Could you please tell us whether we are missing something or you provide your own sample replicates the issue.

  https://stackblitz.com/edit/angular-vtvulb

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 9:34 am EST

  Hi Ashwin,
  
  Thank you for your prompt reply. I have implemented your solution for only using the show method. However,

  1. For the first issue, I apologize for framing the question incorrectly. I want to show the value of computed columns instead of their formula. Hence, I provided the third parameter as true but it didn’t work.

  2. This happens when the user hovers over from a group row to the rows above, it either doesn’t show the tool-tip or it moves it to the top centre of the grid.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2019, 6:25 am EST

  Hi Chetan,

  1. To show the calculated value, you may use the getCellValue method of Flexsheet. Refer to the code snippet below:

  const data = wjcCore.escapeHtml(this.flexSheetIntro.getCellValue(range.row, range.col, false).toString());
  

  2. We are sorry but we were still not able to replicate the issue. Could you please provide us with a sample or you may modify the sample below so that it replicates the issue:

  https://stackblitz.com/edit/angular-qjvb2k