Spreadjs - handle hover over cell _content_

Spreadjs - handle hover over cell _content_

Posted by: alexei.snisarenko on 19 May 2022, 9:37 am EST

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 19 May 2022, 9:37 am EST - Updated 3 October 2022, 9:16 am EST

  Hello,

  I have a cell with content (image attached).

  Please help figure out how to:

  1. When hovering over the cell content - then draw underline for the content
  2. When hovering over cell but outside cell content - do NOT draw underline for the content
  3. When drawing underline - control the thickness of the line, its color and distance from the content
  4. When clicking cell content - raise some sort of CellClicked event
  5. When clicking inside cell but outside content - do NOT raise cell clicked event

  Sample image with single cell attached to illustrate my questions

  

  PS:
  
  a. GC.Spread.Sheets.CellTypes.HyperLink - answers 4 and 5, for 1-3 does not provide a way to draw or not draw underline as well as control line position
  
  b. Worksheet.setHyperlink - does not look like making distinction between 1 and 2

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2022, 3:05 am EST

  Hi Alexei,

  Based on your requirements, you will be required to create a custom Cell Type. You can handle the click, scroll and various actions on the cell. Please refer to the following docs on CellTypes available methods: [b]https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.CellTypes.Base.html[/b]

  Custom Cell Type Demo: [b]https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom/purejs[/b]

  Regards
  
  Ankit

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 20 May 2022, 5:45 am EST

  getHitInfo(x: number, y: number, cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any)
  
  

  does not have explicit access to canvas - I need this access to to measureText (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText) to then decide on the isReservedLocation flag

  What is proper way to access canvas in the getHitInfo?

  This is how I do it now:

          let canvasEl: any = context.sheet.getParent()
              .getHost()
              .querySelector('[gcuielement="gcWorksheetCanvas"]');
          const ctx = canvasEl.getContext("2d");
  
  

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 23 May 2022, 4:07 am EST

  Hi Alexei,

  The entire spread sheet is drawn on a single canvas. getHitInfo provides you the coordinates of pointer’s current location relative to the canvas and the cell Rect, use them to find the area corresponding to a particular cell. You can get the canvas element with the technique you have used or you can simply use the following code snippet:

  document.querySelector('[gcuielement="gcWorksheetCanvas"]')
  

  Regards

  Ankit