Not able to access cell editor after dynamically setting readOnly to false

Tags: #<Tag:0x00007efc6566fb58>
#1

We are trying to create dynamic formulas in our handsontable. For example, if you enter data into column ‘B’, a formula gets rendered in column ‘C’, and similarly if you enter data into column ‘C’, a formula gets rendered in column ‘B’.

In the demo I have attached, we have three column inputs – columns ‘X’, ‘Y’, ‘Z’…

X is required initially and columns ‘Y’ and ‘Z’ are set to read only. If you enter data into column ‘X’ and press tab, we use the ‘cells’ function to switch column ‘Y’ and ‘Z’ to readOnly = false. However, you are not able to access cell editor by just typing, you need to double click the cell in order to edit the cell.

Steps to reproduce:
1.) Enter number in cell X1
2.) Press ‘Tab’ (which should put you into cell Y1)
3.) Try to enter value into cell Y1 (not able to)

See link to JSFiddle: https://jsfiddle.net/ntel_91/1Luybcaq/158/

Additionally, for some reason the css does not work for the first row, but works fine for all others. Is there a reason that the first row css should behave differently than the others?

Thanks a lot

#2

Hi @nick

For the readOnly cell background I recommend using the CSS rewrite for the htDimmed class like here https://jsfiddle.net/teb3q29f/2/. When it comes to the calculation I suggest this approach https://jsfiddle.net/teb3q29f/7/ and the switch to the https://handsontable.com/docs/api/core/#setcellmetaobject meta alteration to add the className along with the readOnly state.

Within that demo, I removed cells logic and packed it to the columns and CSS section. Also, your placeholders are kept in columns so you do not need hot-column elements.

#3

Thanks so much for the quick reply.

The setCellMetaObject works great to solve the first issue.

However, I am noticing that when I use setCellMetaObject, the htDimmed stops working. Do you know why?

https://jsfiddle.net/ntel_91/ybLok1qm/

#4

Also, we need to use HotColumn column because we are rendering custom components in other columns. So using the ‘columns’ in settings doesn’t work for us.

#5

In that demo the htDimmed className (readOnly state) is not attached - we can edit the cells. The issue might be related to an incorrect order of attaching classNames.

#6

Hi @nick

do we have any updates on this issue?

#7