Spreadsheet 13.0 how to highlight cell

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

  • 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.
  • Replied 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)
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels