Customizing button selection color

Customizing button selection color

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

• 

  shanmukha.vangaru

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 May 2021, 11:49 pm EST - Updated 3 October 2022, 12:48 am 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

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  shanmukha.vangaru

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  shanmukha.vangaru

  • Post Options:
  • Link
    Copy

  Posted 23 May 2021, 4:38 pm EST

  Hi,

  The sample code was helpful.

  Thanks
  
  Shanmukha