[SpreadJS] Display icon on column header

[SpreadJS] Display icon on column header

Posted by: 16pa1a0576 on 11 May 2021, 8:11 am EST

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 May 2021, 8:11 am EST

  Hi, I am using Spreadjs with React. I have a, URL for an icon, and I want to display it on the column header. I customized header, but, i am unable to show that icon.
  
  Can you please help with this issue ?
  
  Thanks.

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 12 May 2021, 4:33 am EST

  Hi,

  For this, you need to draw an image inside the paint method. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  var basePaint = spreadNS.CellTypes.ColumnHeader.prototype.paint;
  ComboBoxCellType.prototype.paint = function (
    ctx,
    value,
    x,
    y,
    width,
    height,
    style,
    context
  ) {
    basePaint.apply(this, [
      ctx,
      this.selectedOption.text,
      x,
      y,
      width,
      height,
      style,
      context
    ]);
    let tag = context.sheet.getTag(context.row, context.col);
  
    if (!(tag instanceof Image)) {
      let img = new Image();
      img.src =
        "https://media.geeksforgeeks.org/wp-content/uploads/20200522230419/dropdown-arrow.png";
      img.addEventListener("load", function () {
        ctx.drawImage(img, x + width - 15, y + height / 3, 10, 10);
      });
      context.sheet.setTag(context.row, context.col, img);
    } else {
      ctx.drawImage(tag, x + width - 15, y + height / 3, 10, 10);
    }
  };
  
  

  sample: https://codesandbox.io/s/festive-tdd-02znl?file=/src/ButtonCellType.js:1032-1862

  Regards
  
  Avinash

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy

  Posted 12 May 2021, 6:47 am EST

  Icon is getting displayed only, when we click on sheet area. Initially, icon is not getting displayed.

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 13 May 2021, 4:55 am EST

  Hi,

  For this, we need to repaint after the icon drawn to the Cell. Please refer to the updated sample and let me know if you still face any issues.

  sample: https://codesandbox.io/s/fancy-microservice-zxp9o?file=/src/HeaderComboBoxCellType.js

  Regards
  
  Avinash