Change wtBorder current border color specific cell?

hugh · 27 July 2020 10:01

Hi again guys,

This time I want to know if there is a way I can change the border color of the wtBorder current?

If for example, I want to make the wtBorder color green only row 4, col 3, is that possible?

Thank you!

piotr.nowak · 24 July 2020 09:31

Admittedly you can use afterDrawSelection - https://handsontable.com/docs/7.4.2/Hooks.html#event:afterDrawSelection - to change the additional style of selection. Here is a demo to show how we could work with this hook - https://jsfiddle.net/uo31xp6j/

But generally, I think this isn’t possible to achieve what you want.

I mean that this feature to change the border of .wtBorder .current is hiding deeply in our code. Here is a code snippet responsible for that -

github.com

handsontable/handsontable/blob/master/src/3rdparty/walkontable/src/border.js#L164


for (let i = 0; i < 5; i++) {
  const position = borderDivs[i];
  const div = rootDocument.createElement('div');


  div.className = `wtBorder ${this.settings.className || ''}`; // + borderDivs[i];


  if (this.settings[position] && this.settings[position].hide) {
    div.className += ' hidden';
  }
  style = div.style;
  style.backgroundColor = (this.settings[position] && this.settings[position].color) ? this.settings[position].color : settings.border.color;
  style.height = (this.settings[position] && this.settings[position].width) ? `${this.settings[position].width}px` : `${settings.border.width}px`;
  style.width = (this.settings[position] && this.settings[position].width) ? `${this.settings[position].width}px` : `${settings.border.width}px`;


  this.main.appendChild(div);
}
this.top = this.main.childNodes[0];
this.left = this.main.childNodes[1];
this.bottom = this.main.childNodes[2];
this.right = this.main.childNodes[3];

As you can see this border is really background-color.
Nevertheless, we don’t expose this as external API.

hugh · 27 July 2020 05:23

Thanks for the solution!

aleksandra_budnik · 3 August 2020 06:12