Log in to start a topic

Cell hover

Posted by: pedro.moraes on 13 March 2023, 4:43 am EST

  • pedro.moraes

    • Post Options:
    • Link
      Copy

    Posted 13 March 2023, 4:43 am EST

    hello,

    I need some help, I want to activate the editor when hovering the mouse over the cell, but I don’t know how to do it

  • ankit.kumar

    Posted 14 March 2023, 2:49 pm EST

    Hello Pedro,

    You can activate the editor when the mouse hovers over a cell by overriding the getHitInfo() and processMouseEnter() method of the GC.Spread.Sheets.CellTypes.Text class. The getHitInfo() method is used to return the hit information of the cells and processMouseEnter() method is triggered when the mouse enters a cell. Inside the processMouseEnter(), you can use sheet.setActiveCell() method to set the hovered cell as active cell and then sheet.startEdit() method to activate the editor on active cell in the spread.

    Please refer to the attached sample for further understanding

    Sample: https://jscodemine.grapecity.com/share/F7InbuNClk6_GiJub8JOww/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Please let us know if you face any difficulties.

    Doc reference

    GC.Spread.Sheets.CellTypes.Text class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.Text

    sheet.setActiveCell():https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Worksheet#setactivecell

    sheet.startEdit(): https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#startedit

    Regards,

    Ankit

  • pedro.moraes

    Posted 15 March 2023, 12:39 am EST - Updated 15 March 2023, 12:47 am EST

    Thanks,

    In this case, when there are other cells with this condition when I switch from one to the other, the previous one does not deactivate for the other cell to activate.

    And Is there a way to change the cursor to pointer when hovering the mouse over the cell?

  • avinash.pathak

    Posted 15 March 2023, 8:18 pm EST

    Hello,

    You can use sheet.endEdit() method to deactivate the editor from the cell which is currently in edit mode. After deactivating the editor from the previous cell, you can use sheet.startEdit() method to open the editor on hovered cell.

    For the second use case, as I can understand, you want to change the cursor style in the editor of hovered cell. For this use case, you can override the activateEditor() method of GC.Spread.Sheets.CellTypes.Text class. The activateEditor(editorContext, cellStyle, cellRect, context) method’s editorContext argument is the html element of the cell editor. You can change the cursor style of the cell editor with the statement editorContext.style.cursor = ‘pointer’

    Please refer to the attached sample for further understanding

    Sample: https://jscodemine.grapecity.com/share/2R-Idt_vskGOc0gUd3VQUw/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Please let us know if you still face any issues.

    Doc reference

    GC.Spread.Sheets.CellTypes.Text.activateEditor():https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.CellTypes.Text#activateeditor

    sheet.startEdit():https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#startedit

    sheet.endEdit(): https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#endedit

    Regards,

    Avinash

  • pedro.moraes

    Posted 17 March 2023, 7:26 am EST

    Hello,

    I did it a little differently, where my class implements the button class and the methods I need to use are overridden. But the activateEditor method still doesn’t change the mouse cursor.

    export class EditPremissaCellType extends GC.Spread.Sheets.CellTypes.Button {
  mapIcones = new Map([
    [
      'icon-hash',
      new Path2D(
        'M853.333 384h-180.053l18.773 170.667h161.28c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-151.467l23.467 208.64c0.164 1.408 0.257 3.040 0.257 4.693 0 23.706-19.218 42.924-42.924 42.924-22.053 0-40.221-16.63-42.649-38.034l-0.018-0.197-23.893-218.027h-170.667l23.893 208.64c0.164 1.408 0.257 3.040 0.257 4.693 0 23.706-19.218 42.924-42.924 42.924-22.053 0-40.221-16.63-42.649-38.034l-0.018-0.197-23.893-218.027h-189.44c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h180.053l-18.773-170.667h-161.28c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h151.467l-23.467-208.64c-0.181-1.477-0.285-3.187-0.285-4.922 0-22.011 16.668-40.13 38.071-42.422l0.187-0.016h4.693c0.077-0.001 0.168-0.001 0.259-0.001 21.911 0 39.964 16.516 42.39 37.778l0.018 0.196 23.893 218.027h170.667l-23.893-208.64c-0.155-1.364-0.243-2.945-0.243-4.546 0-21.846 16.418-39.857 37.588-42.368l0.202-0.019h5.12c0.077-0.001 0.168-0.001 0.259-0.001 21.911 0 39.964 16.516 42.39 37.778l0.018 0.196 23.893 217.6h189.44c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM417.28 384l18.773 170.667h170.667l-18.773-170.667z'
      ),
    ],
    [
      'icon-edit',
      new Path2D(
        'M926.293 883.626c-29.627 29.515-70.496 47.762-115.627 47.762s-86-18.248-115.632-47.767l-575.995-575.995c-5.016-5.195-8.732-11.678-10.602-18.904l-0.065-0.296-65.707-234.667c-0.936-3.335-1.474-7.164-1.474-11.119 0-23.564 19.103-42.667 42.667-42.667 0.518 0 1.035 0.009 1.549 0.028l-0.074-0.002c1.668-0.308 3.587-0.484 5.547-0.484s3.879 0.176 5.742 0.514l-0.195-0.029 234.667 64c7.522 1.935 14.005 5.65 19.212 10.679l575.988 575.988c30.026 29.711 48.619 70.924 48.619 116.48s-18.593 86.77-48.605 116.466l-0.014 0.014zM865.707 712.96l-567.040-568.32-151.467-42.667 40.533 154.027 567.893 567.040c14.086 14.086 33.546 22.798 55.040 22.798 42.989 0 77.838-34.849 77.838-77.838 0-21.494-8.712-40.954-22.798-55.040v0z'
      ),
    ],
    [
      'icon-delete',
      new Path2D(
        'M896 768h-170.667v42.667c0 70.692-57.308 128-128 128v0h-170.667c-70.692 0-128-57.308-128-128v0-42.667h-170.667c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h42.667v-554.667c0-70.692 57.308-128 128-128v0h426.667c70.692 0 128 57.308 128 128v0 554.667h42.667c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM384 810.666c0 23.564 19.103 42.667 42.667 42.667v0h170.667c23.564 0 42.667-19.103 42.667-42.667v0-42.667h-256zM768 128c0-23.564-19.103-42.667-42.667-42.667v0h-426.667c-23.564 0-42.667 19.103-42.667 42.667v0 554.667h512zM426.667 213.333c23.564 0 42.667 19.103 42.667 42.667v0 256c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v0-256c0-23.564 19.103-42.667 42.667-42.667v0zM597.333 213.333c23.564 0 42.667 19.103 42.667 42.667v0 256c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v0-256c0-23.564 19.103-42.667 42.667-42.667v0z'
      ),
    ],
  ]);

  colOld: number;
  rowOld: number;

  constructor(private icone: string, private color: string) {
    super();
    this.typeName = 'EditPremissaCellType';
  }

  paint(
    ctx: CanvasRenderingContext2D,
    _value: any,
    x: number,
    y: number,
    w: number,
    _h: number,
    _style: GC.Spread.Sheets.Style,
    _context?: any
  ) {
    if (!ctx) {
      return;
    }
    ctx.save();
    ctx.translate(x + w / 3, y);
    ctx.scale(-0.02, 0.02);
    ctx.rotate((180 * Math.PI) / 180);
    ctx.fillStyle = this.color;
    ctx.fill(this.mapIcones.get(this.icone));
    ctx.restore();
  }

  getHitInfo(x: number, y: number, _cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any) {
    const size = 10;
    const xm = cellRect.x + cellRect.width / 2;
    const ym = cellRect.y + cellRect.height / 2;

    const info: GC.Spread.Sheets.IHitTestCellTypeHitInfo = {
      cellRect: cellRect,
      col: context.col,
      row: context.row,
      sheet: context.sheet,
      sheetArea: context.sheetArea,
      x: x,
      y: y,
    };

    if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
      info.isReservedLocation = true;
    }

    return info;
  }

  processMouseEnter(hitInfo: GC.Spread.Sheets.IHitTestCellTypeHitInfo): boolean {
    if (!this.colOld && !this.rowOld) {
      const sheet = hitInfo.sheet;
      sheet.setActiveCell(hitInfo.row, hitInfo.col);
      sheet.startEdit();
      this.rowOld = hitInfo.row;
      this.colOld = hitInfo.col;
    } else {
      const sheet = hitInfo.sheet;
      const row = hitInfo.row;
      const col = hitInfo.col;
      if (row !== this.rowOld || col !== this.colOld) {
        sheet.endEdit();
        sheet.setActiveCell(hitInfo.row, hitInfo.col);
        sheet.startEdit();
        this.rowOld = hitInfo.row;
        this.colOld = hitInfo.col;
      }
    }
    return true;
  }

  activateEditor(editorContext: HTMLElement, _cellStyle: GC.Spread.Sheets.Style, _cellRect: GC.Spread.Sheets.Rect, _context?: any): void {
    editorContext.style.cursor = 'pointer';
  }
}

  • avinash.pathak

    Posted 20 March 2023, 1:29 am EST

    Hello,

    After investigating the code snippet provided by you, we found that you are trying to change the pointer for the editor of the button type cell. Please note that the GC.Spread.Sheets.CellTypes.Button class does not support opening editor for a button cell. That is why, even after using sheet.startEdit() method to open the editor, it does not open the editor. The intended use case of button type cell is provide the functionality of a button. It can not be used to show values.

    For more information, you can refer to https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/button/purejs

    Please specify your use case so that we could provide you a solution as per you use case.

    Regards,

    Avinash

  • pedro.moraes

    Posted 20 March 2023, 1:43 am EST

    I got it,

    I’m using the button type cell because of the GC.Spread.Sheets.Events.ButtonClicked, if there is another way to capture the cell’s click without being of button type and moving the mouse over it changes the cursor.

  • avinash.pathak

    Posted 20 March 2023, 7:35 pm EST

    Hello,

    As I can understand, firstly, you want to know when a cell on the worksheet is clicked. Secondly, you want to change the cursor when cursor is hovering over a particular cell(the cell is not in editing mode). For these use cases you can follow the steps given below.

    For the first use case, you can bind an event handler to the “CellClick” event. This event is fired whenever a cell on the worksheet is clicked. In the arguments of the handler, you can get which cell was clicked. Please refer to the below code snippet.

    spread.bind(GC.Spread.Sheets.Events.CellClick, (event, args) => {
    let row = args.row;
    let col = args.col;
    if (row === 5 && col === 5) {
        console.log('cell clicked');
    }
})


    For the second use case, you can bind an event handler to the “mousemove” event of the canvas element. You can utilize spread.hitTest(x, y) method to find the cell on which the cursor is hovering. When the cursor hovers over a certain cell, you can change the cursor style using canvasElement.style.cursor = ‘pointer’. Please refer to the code snippet.

    let workbookCanvas = document.querySelector('[gcuielement="gcWorksheetCanvas"]');
// changes mouse cursor when cursor hovers over a certain cell
workbookCanvas.addEventListener('mousemove', (e) => {
    if (e.button === 0 && e.which === 1) {
        return;
    }
    let hitTestInfo = spread.hitTest(e.offsetX, e.offsetY);
    if (hitTestInfo && hitTestInfo.worksheetHitInfo) {
        let worksheetHitInfo = hitTestInfo.worksheetHitInfo;
        let row = worksheetHitInfo.row;
        let col = worksheetHitInfo.col;
        if (row === 5 && col === 5) {
            workbookCanvas.style.cursor = 'pointer';
            e.stopImmediatePropagation();
        }
    }
}, true);


    Please refer to the attached sample for further understanding.

    Sample:https://jscodemine.grapecity.com/share/EjT1n4B1B0SyA0-j_i6TaQ/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Doc reference

    GC.Spread.Sheets.Events.CellClick event: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Events#cellclick

    spread.hitTest(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook#hittest

    IWorkbookHitTestInformation interface: https://www.grapecity.com/spreadjs/api/interfaces/GC.Spread.Sheets.IWorkbookHitTestInformation

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.