How to add background color + border dynamically to keep together CONTINUE

Tags: #<Tag:0x00007f8b1d058548>
#1

Dear developers,

a few weeks ago I created question about adding background color + border dynamically to keep together available at https://forum.handsontable.com/t/how-to-add-background-color-border-dynamically-to-keep-together.

After several days I tried classList but the problem is if I work with any cell (its editing, autofill) the formatting will disappeared. If I use setCellMeta in my https://jsfiddle.net/janzitniak/h6oac8pb/7/ then formatting stays but how can I background color + border dynamically to keep together as I described in my main question?

Can you give me any advice please?
Regards
Jan

#2

Hi @jan.zitniak

Have you considered using customBorders plugin instead of adding a border?

Handsontable uses border-right and border-bottom only. It means that if you add all 4 borders for a cell it shifts the table. It also happens for your demo

25

#3

Dear @aleksandra_budnik thank you for your quick response, it helped me.
Here is a piece of code with workaround:

const customBordersPlugin = hot.getPlugin('customBorders'); 
customBordersPlugin.setBorders(hot.getSelectedRange(), {
    left: {hide: false, width: 2, color: 'black'},
    right: {hide: false, width: 2, color: 'black'},
    top: {hide: false, width: 2, color: 'black'},
    bottom: {hide: false, width: 2, color: 'black'}                        
});

Regards
Jan

#4

Dear @aleksandra_budnik the next question what I have is, how can I change font (size, stale, type) + alignment + bordering + backgrounding + so on of cell dynamically. I mean to change many formatting attributes dynamically.

The best way should be do this via CSS, but there is issue if I work with any cell (its editing, autofill) the formatting will disappeared.

Maybe you have some particular recommendations.

#5

it won’t disappear if you use classes instead of element.style.

#6

@aleksandra_budnik thank you for your tip but probably I need closer approach because in this https://jsfiddle.net/qtvduL21/ we used class via classList.add but if I edit any cell, it disappears.

#7

Both of those buttons do not work and they print an error in the console.
Maybe we can start from the beginning? Let me know what are the exact requirements and I will share the details of an approach that is supported by Handsontable.

The specification should contain

  • what happens if one cell is selected, and what it there’s a range of cells
  • do you add the same border to all the cells?
  • do you add the same background color to all the cells?
  • do your cells have any classes that should remain
#8

@aleksandra_budnik I answer your questions:

  1. It will work same for one or range of cells as well
  2. Yes I do
  3. Yes I do
  4. Yes I do

That demo is working, please select any cell and then press button for changing background color or bordering. In that example works for one cell but I can to modify it for range as well.

What is my goal? Please imagine user’s working in Excel, e.g. selecting cells and then changing font color or size, background color, bordering and so on. All formarting stays if he continues in editing other cells.

#9

I suggest replacing class.add with setCellMeta. In the end, use box-shadow inset as it does not cause the row misalignment.

End result https://jsfiddle.net/Ludxzfgn/

We did not specify that before but in the current scenario, you can only use one of the two: border OR background. To make them both work and turn off some of them would require further coding.

#10