Cell click support for writing formulas

Tags: #<Tag:0x00007efc625c2398>
#1

Hi,

I’m trying to implement the Excel like feature which allows the user to click on a cell to get its index filled into the formula he is working on. For example the user types “=A1+” in a cell in edit mode and then clicks the cell A2, the content of the cell the user was typing in should become “=A1+A2” and be still in edit mode so the user can insert more content without having to go to edit mode by clicking the cell again. I got a naive implementation working but I cannot manage to get the edited cell back to edit mode after the click on another cell. I tried window.setTimeout to give HOT some more time. The editor will open with setTimeout but it will be empty in both tried cases (with initial value for beginEditing and without).
Here is my fiddle, I would be very happy if you could have a look: https://jsfiddle.net/fjd5u7bq/3/
Sorry for the commented code, but I hope it helps to see what I already tried. Unfortunately this feature is a must-have for our customer.

Best regards
Ole

Click to add using hyperformula as in an excel
Adding sum formula
#2

Hi @ole.cordsen
I prepared a simple demo, using beforeOnCellMouseDown and afterOnCellMouseUp: https://jsfiddle.net/8otg3qk7/

The beforeOnCellMouseDown hook allows you to block “selection” on cells/columns/rows accordingly to your requirements. On the other hand, the afterOnCellMouseUp hook allows back with a :focus state and moves the caret to the end.

Of course, this example should be an inspiration rather than a final solution covering all use cases.

#3

Hi @piotr.laszczkowski,
thank you very much, the fiddle looks really great! I’m not in the office this week, I will try integrate the code into our react codebase next week.

#4

I’m glad that example might help. If you can, please let us know the results of integrating that solution into your application.
That will help others and us in picking issues to our roadmaps.

#5

Hi @piotr.laszczkowski,
thanks again for your help. I integrated your sample into my in progress React spreadsheet component in our codebase. For now everything looks fine. In a next step I will try to highlight in the formula referenced cells but I think this should be possible via classNames.

#6

Thank you for your reply, that’s great news!
Good luck, and if you will notice something or in case you will have some remarks implementing formulas’ highlighting, we are open to getting some additional feedback.

#7