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)
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?
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.
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.
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.