Customizing button selection color

Posted by: shanmukha.vangaru on 18 May 2021, 11:49 pm EST

  • Posted 18 May 2021, 11:49 pm EST

    Hi,

    I have referred the docs for overriding the background color of the button when it is selected but couldn't find a way to do it.

    PS: I know there is a property called backColor for the button but that overrides the backColor of the button but doesn't override it during the click event.

    Below is the screenshot taken during the click event.



    Is there a way to achieve it ?

    Thanks,
    Shanmukha
  • Replied 19 May 2021, 6:32 pm EST

    Hi Shanmukha,

    For this, you need to override the paintValue method of ButtonCellType class. Please refer to the following code snippet and attached sample that demonstrates the same.

    let oldPaintValue = GC.Spread.Sheets.CellTypes.Button.prototype.paintValue;
    GC.Spread.Sheets.CellTypes.Button.prototype.paintValue = function (
    ctx,
    value,
    x,
    y,
    w,
    h,
    style,
    options
    ) {
    var self = this,
    marginLeft = self._marginLeft,
    marginTop = self._marginTop;
    var startX = x + marginLeft,
    startY = y + marginTop,
    width = w - marginLeft - self._marginRight,
    height = h - marginTop - self._marginBottom;

    let buttonState = style.cellType._buttonState;
    //if the state is click then fill the button with custom style
    if (buttonState === 2) {
    ctx.fillStyle = "cyan";
    style.cellType._buttonState = 2;
    ctx.fillRect(startX + 1, startY + 1, width - 2, height - 2);
    if (this._text) {
    GC.Spread.Sheets.CellTypes.Text.prototype.paintValue.call(
    self,
    ctx,
    this._text,
    startX,
    startY,
    width,
    height,
    style,
    options
    );
    }
    return;
    }
    oldPaintValue.apply(this, arguments);
    };


    sample: https://codesandbox.io/s/beautiful-perlman-p8ohc?file=/src/index.js:266-1367
    Regards,
    Avinash
  • Replied 20 May 2021, 3:31 pm EST

    Hi,

    I am getting the following error when I am trying to run your suggested code.

    Error: Property 'paintValue' does not exist on type 'Button'.

    FYI:
    SpreadJS version: 14.0.10,
    Using React + Typescript

    Can you please look into it ?

    Regards,
    Shanmukha
  • Replied 20 May 2021, 5:52 pm EST

    Hi Shanmukha,

    Please refer to the following sample that demonstrates how you implement the same functionality in the React+typescript environment and let us know you face any issues.

    sample: https://codesandbox.io/s/react-typescript-forked-8s80b?file=/src/index.tsx

    Regards
    Avinash
  • Marked as Answer

    Replied 23 May 2021, 4:38 pm EST

    Hi,

    The sample code was helpful.

    Thanks
    Shanmukha
Need extra support?

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

Learn More

Forum Channels