How to prevent selection of read-only cells?

Tags: #<Tag:0x00007efc7286b990> #<Tag:0x00007efc7286b850>
#1

Hi.

I’m trying to figure out how to configure HoT so that read-only cells can’t be selected. Most importantly when the user hits the tab or shift-tab key the selection should move to the next/prior editable cell. I’ve looked through the options and searched the forum and couldn’t find an answer.

This is really important to us and could end up being a deal breaker if I can’t figure it out. Any help would be appreciated, thanks.

#2

Hi @dan.rhodes

Thank you for contacting us. We have dedicated option to handle this. The only thing to do is to set disableVisualSelection to true for the column that has disabled cells and it will handle all of your requirements. Here’s an example: https://jsfiddle.net/handsoncode/9wL2y6at/

#3

Thanks for the response. That is a definite improvement, but not 100%. That solves the issue of not being able to select read-only cells. But it does not solve the tab key issue.

For a simple example lets say there are only 2 editable cells: one on row 2 column 2 and another on row 4 column 2. If I click into the one on row 2 it highlights.

Before the disableVisualSelection when I hit tab it selected the cell in row 2 column 3 (which is read-only). Now that I have all of the cells except the 2 mentioned above disabled for selection when I hit tab in row 2 column 2 the selection simply disappears as if nothing is now selected. The selection does not move down to the cell in row 4 column 2.

I’m building a data entry application and the users will spend all of their time entering data. Between each item they press tab. This is an extremely common GUI technique that I’ve been employing for well over 2 decades. Without this they will have to switch back and forth between the keyboard and mouse which will significantly decrease their data entry speed.

Hopefully there is also a way to solve this?

#4

Hi @dan.rhodes

Let me clarify. Do you mean that, as in my example, when we have 3 columns, where 2 middle one has read-only cells, and I want to navigate by keyboard from column 1 to 3, the selection disappears while tabbing through the column 2, right?

If so, currently this is how our focus implementation works, you are still able to move to the column 3 by pressing the tab key once again. If that’s not the case you are describing, please modify my example above so it represents the actual scenario.

#5

I’m talking in any case including to cells blow and then wrapping back around to the top cell. Basically the same way tabbing works in a normal application.

#6

Hi @dan.rhodes

I would use the afterSelectionEnd hook to run deselectCell() method within and IF statement that check

IF(hot.getCellMeta(row_index, column_index).readOnly === true)

As there’s no hook that runs before selection happens.

Alternatively, you can alter the selection via beforeKeyDown for the TAB key. Then you’d need to return false in the case of the readOnly cell and run your own selectCell() method for the next column.

#7