Mouse over hover repaint in custom cell

Mouse over hover repaint in custom cell

Posted by: jeff on 14 November 2019, 11:11 am EST

• 

  jeff

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 November 2019, 11:11 am EST

  Is there a way to repaint a custom cell on mouse over event?

• 

  jeff

  • Post Options:
  • Link
    Copy

  Posted 14 November 2019, 11:27 am EST

  I would also like a custom pointer. Is this possible as well?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2019, 5:55 pm EST

  Hi Jeff,

  With the release of v13, we have introduced the cell states feature to easily style cells based on the cell state. Please refer to the following sample which demonstrates the use of cellstates: https://www.grapecity.com/spreadjs/demos/features/cell-state/introduction/purejs
  
  If cell states do not fullfill your requirement then you may create a custom cell type and inside its paint method, you could check if the cell is in hover state by using the getState() method. Please refer to the following code snippet and the sample which demonstrates the same:

  // draw circle if hovering
    let state = options.sheet.cellStates.getState(options.row, options.col);
    if (state & GC.Spread.Sheets.CellStatesType.hover) {
      ctx.moveTo(x + Math.floor(w / 2), y + Math.floor(h / 2));
      ctx.beginPath();
      ctx.arc(
        x + Math.floor(w / 2),
        y + Math.floor(h / 2),
        Math.floor(size / 2),
        0,
        2 * Math.PI
      );
      ctx.stroke();
    } else {
      ctx.rect(
        x + Math.floor(w / 2) - size / 2,
        y + Math.floor(h / 2) - size / 2,
        size,
        size
      );
      ctx.stroke();
    }
  

  https://codesandbox.io/s/spread-js-starter-z7hxq

  For older versions, you could use the repaint method() to repaint some part of the sheet. Please refer to the following code snippet:
  
  // repaint cell 0, 0
  
  var rowIndex = 0, colIndex = 0;
  
  var cellRect = spread.getCellRect(rowIndex, colIndex);
  
  sheet.repaint(cellRect);

  API reference:
  
  • repaint() method: http://help.grapecity.com/spread/SpreadSheets12/webframe.html#SpreadJS~GC.Spread.Sheets.Worksheet~repaint.html

  I would also like a custom pointer. Is this possible as well?
  
  For custom pointer, you may handle the movemove event and update the cursor for the viewport canvas. Please refer to the following code snippet:

  let cellType = sheet.getCellType(
      result.worksheetHitInfo.row,
      result.worksheetHitInfo.col
    );
  
    if (cellType.typeName === "MyCustomCellType") {
      let canvasEl = spread
        .getHost()
        .querySelector('[gcuielement="gcWorksheetCanvas"]');
      if (canvasEl && canvasEl.style.cursor === "default") {
        canvasEl.style.cursor = "pointer";
      }
    }
  

  Above shared sample also demonstrates this functionality.

  Regards
  
  Sharad

• 

  jeff

  • Post Options:
  • Link
    Copy

  Posted 21 November 2019, 7:51 pm EST

  Thank you!