Cells method - copy className from another cell

dasunddas · 26 August 2019 12:25

Hello,

I’d like to set dynamically the style of some cells in column A based on another cell className.

To make the story short, here’s a demo : https://jsfiddle.net/Caroline060606/npdr5g1s/44/

All the cells in column A having a value equals to ‘Item’ or ‘Data’ must use the same style (i.e. same className input) than the cell above.

In my example, it looks fine but if you scroll down the list, you will notice the orange style suddenly disappears !

Can you please tell me what’s wrong ?

Cheers,
Caroline

aleksandra_budnik · 26 August 2019 12:25

Hey
following these goals

All the cells in column A having a value equals to ‘Item’ or ‘Data’ must use the same style (i.e. same className input) than the cell above.

is

   cells: function(row, col, prop) {
      const cp = {};
    	if(this.instance.getDataAtCell(row, col) === 'Item' || this.instance.getDataAtCell(row, col) === 'Data'){
			cp.className = 'input'
		}
      return cp;
  }

an acceptable option for you?

Demo https://jsfiddle.net/q1p538k2/

dasunddas · 26 August 2019 12:39

Hi Aleksandra,

How are you doing ?

Unfortunately not, because both ‘Item’ and ‘Data’ can also be used between two cells having a different style.

I updated my demo with a better example : https://jsfiddle.net/Caroline060606/npdr5g1s/52/

It looks like the problem occurs once the ‘Input’ cell is not visible anymore…

Any idea ?

dasunddas · 27 August 2019 07:38

I’ve got another question on top of this style issue : it looks like borders of two contiguous cells are displayed one next to the other, making a thicker border. Is there a way to check if a common border is already filled ?

Please check the latest version of my code : https://jsfiddle.net/Caroline060606/npdr5g1s/61/

As you can see, the row headers are not in line with their corresponding row…

Thanks.
Caroline

dasunddas · 27 August 2019 11:16

Concerning the display issue where the background color disappears, it’s definitely linked to the virtual rendering mechanism which dynamically removes the className (the one with the background color) from the ‘Input’ cell once it’s out of the viewport.

Obviously I tried to disable this mechanism by setting the option renderAllRows to true. It works fine but performance is seriously affected then as my spreadsheet contains thousands of rows (approx. 80 columns).

Still investigating…

aleksandra_budnik · 27 August 2019 12:52

Hey @dasunddas

sorry for keeping you waiting. I had 2 meetings today but I’m glad to see you digging deep into Handsontable structure.

Thank is actually an interesting case.

ps. I would remove the left and top border as is misaligns the rows

.non-empty-cell {
   border-bottom: thin solid #000 !important;
   border-right: thin solid #000 !important;
   /*border-top: thin solid #000 !important;
   border-left: thin solid #000 !important;*/
   color: black !important;
   font-family: Calibri, sans-serif !important;
   font-size: 0.8rem !important;
}

Additionally, I would recommend using cellProperties to pass className .

dasunddas · 27 August 2019 13:26

Hi @aleksandra_budnik

No worries, you’re so kind to answer my previous questions.

Border issue
If border-top and border-left are removed, some cells do not have these borders anymore as they’re contiguous to empty cells which have no style at all. In my example above, cells at row 2 between columns B and F would not have top border with your change, and that is not pretty.
className issue
I’m already using cellProperties to pass className. Check line 98 in my JSFiddle example above :

cellProperties.className = allClassNames;

Did I miss something ?

aleksandra_budnik · 28 August 2019 06:36

I have asked our developer to check the example. However we’re having a code freeze on Friday so it can take a couple of days if that’s not a problem for you.

dasunddas · 28 August 2019 06:51

Code freeze = new version of HOT soon ???

Sure, no problem. Looking forward.

aleksandra_budnik · 28 August 2019 07:02

Yes, usually code freeze is week before the release.

aleksandra_budnik · 30 August 2019 09:19

Hey Caroline,

I’m back with an improved demo https://jsfiddle.net/7t1ewaxp/
I got a hint that the input was given for unrendered cells are was replacing the logic for all the rest.

dasunddas · 2 September 2019 09:15

Hello Aleksandra,

Thanks for your demo. Unfortunately, it doesn’t match my requirements as the color of the “Item” and “Data” cells relies on the upper cell, while all these cells are in orange in your improved demo.

In my example, I expect to have cells between MoveRequest and EndMoveRequest cells in red, and the ones between Expected and EndExpected in green.

But I found another way to do it : a new column is inserted left to current column A, and contains the cell style to be used (which is calculated by parsing the source data). This new technical column is hidden then.

Here’s my updated example : https://jsfiddle.net/Caroline060606/npdr5g1s/76/

You can consider this problem as fixed then.

Do you have an idea how to collapse borders ? I played a bit with the CSS option border-collapse in the browser console but it seems it’s not taken into account…

One additional question : by adding a new hidden column, the first visible column has now header named “B”. Is it possible to rename all the column headers to “A”, “B”, “C”, etc… again ?

Kind regards,
Caroline

aleksandra_budnik · 2 September 2019 09:58

Hey Caroline,

Great to hear that.

Do you have an idea how to collapse borders ?

I have never had a similar case scenario. What it should should look like?

One additional question : by adding a new hidden column, the first visible column has now header named “ B ”. Is it possible to rename all the column headers to “ A ”, “ B ”, “ C ”, etc… again ?

You can make a call to the updateSettings > colHeaders.
You can use the followng hooks to call the updateSettings method
https://handsontable.com/docs/7.1.1/Hooks.html#event:afterHideColumns
https://handsontable.com/docs/7.1.1/Hooks.html#event:afterUnhideColumns

dasunddas · 2 September 2019 12:41

Thanks for the tip about the column headers.

I have never had a similar case scenario. What it should should look like ?

This is what I expect :

And this is the current situation in my demo :

As you can see, the cells border should be thin and match the row header one, but it is not the case if the border-top and border-bottom properties are set at the same time. And if I remove one of these two properties, then a border is missing if there’s an empty cell above (or below).

aleksandra_budnik · 3 September 2019 07:26

So we are back to the

.non-empty-cell {
   border-bottom: thin solid #000 !important;
   border-right: thin solid #000 !important;
   /*border-top: thin solid #000 !important;
   border-left: thin solid #000 !important;*/
   color: black !important;
   font-family: Calibri, sans-serif !important;
   font-size: 0.8rem !important;
}

but at the same time we need to attach additional borders to missing elements.

https://jsfiddle.net/age6fw5o/ < it is a matter of doing the CSS child magic

dasunddas · 4 September 2019 11:10

Hello Aleksandra,

I think there’s a misunderstanding.

Your change (using the :nth-child() pseudo-class) adds a right border to the column header, while I expect a top border for cells C2, D2, E2, F2, G2, C33, D33, E33, etc…

Is it again the same pseudo-class that can make the magic ?

aleksandra_budnik · 4 September 2019 11:32

Yes, I might got lost a bit…

What we have is

If border-top and border-left are removed, some cells do not have these borders anymore as they’re contiguous to empty cells which have no style at all. In my example above, cells at row 2 between columns B and F would not have top border with your change, and that is not pretty.

so can we just https://jsfiddle.net/c3L7dfms/ ?

dasunddas · 12 September 2019 12:39

Hi Aleksandra,

Sorry about this late reply.

Unfortunately, no, it’s not that simple. In your last example, all cells have borders, while this is what I’m looking for :

Only the cells with a content different than NULL have borders.

Is it possible to use border-collapse: collapse; ?

aleksandra_budnik · 13 September 2019 07:16

Aaa OK, I thought that you’d like to have a wider border for content cells and default (1px) for the rest, and it should be 0px;
It might be complicated, especially cause of the border structure (we draw only bottom and right border).
The first step is to remove the border from anything that doesn’t have a value https://jsfiddle.net/24nrd3fo/ so I’ve just added else in you non-empty-cell className attachment.
Then, if the dataset doesn’t change you can add the

border-top: thin solid #000 !important;
border-left: thin solid #000 !important;

to the cells like Country (C2).

dasunddas · 20 September 2019 09:36

Hi Aleksandra,

Thank you for your help on this matter. I finally found out how to deal with the borders.

You can close this topic.

Have a nice day,
Caroline