Spreadsheet 13.0 how to highlight cell

Spreadsheet 13.0 how to highlight cell

Posted by: 122368177 on 6 April 2020, 9:08 pm EST

• 

  122368177

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 9:08 pm EST

  I want to highlight cells with custom style hover tips and colorful borders.
  
  I used floatingObjects but there is not cell.host() method to fixed position
  
  I used custom Comment, but 'activeSheet.options.isProtected = true ’ occurs some lock error
  
  I don’t know which is better.

• 

  122368177

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 9:10 pm EST

  const color = value.color || ‘orange’
  
  const comment = new GC.Spread.Sheets.Comments.Comment()
  
  comment.text(op.user.id.substr(0, 8))
  
  comment.autoSize(true)
  
  comment.borderColor(‘rgba(0,0,0,0)’)
  
  comment.opacity(1)
  
  comment.backColor(color)
  
  comment.foreColor(‘white’)
  
  comment.width(100)
  
  comment.height(30)
  
  comment.dynamicSize(true)
  
  comment.dynamicMove(true)
  
  comment.locked(true)
  
  comment.lockText(true)
  
  comment.padding(new GC.Spread.Sheets.Comments.Padding(0, 5, 2, 5))
  
  comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown)
  
  comment.location(new GC.Spread.Sheets.Point(-40, -24))
  
  activeSheet.options.isProtected = true
  
  activeSheet.getCell(row, col).comment(comment)
  
  const style = activeSheet.getStyle(row, col, GC.Spread.Sheets.SheetArea.viewport) || new GC.Spread.Sheets.Style()
  
  style.borderLeft = new GC.Spread.Sheets.LineBorder(color, GC.Spread.Sheets.LineStyle.medium)
  
  style.borderTop = new GC.Spread.Sheets.LineBorder(color, GC.Spread.Sheets.LineStyle.medium)
  
  style.borderRight = new GC.Spread.Sheets.LineBorder(color, GC.Spread.Sheets.LineStyle.medium)
  
  style.borderBottom = new GC.Spread.Sheets.LineBorder(color, GC.Spread.Sheets.LineStyle.medium)
  
  activeSheet.setStyle(row, col, style, GC.Spread.Sheets.SheetArea.viewport)

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 April 2020, 12:41 am EST

  Hi,

  We could add a tooltip by handling the “movemove” event and then use the hitTest method to get information about the cell over which the mouse is hovering. Please refer to the following sample which demonstrates the same:
  
  https://codesandbox.io/s/spread-js-starter-q3wti?file=/src/index.js
  
  To update the cell styles on hover, we could use the CellStates feature of SpreadJS. Please refer to the following code snippet:

  var style = new GC.Spread.Sheets.Style();
  style.backColor = "blue";
  style.foreColor = "red";
  var range = new GC.Spread.Sheets.Range(0, 0, 10, 10);
  activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, style);
  

  For more information about cellStates, you may refer to the following demo sample:
  
  https://www.grapecity.com/spreadjs/demos/features/cell-state/introduction/purejs

  API reference:
  
  • hitTest() method: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.Workbook~hitTest.html

  Regards
  
  Sharad