We are attempting to create an editable grid using CellTable
. The use
case is fairly high volume data entry for accountants who are used to
10-key entry into spreadsheets. We are trying to replicate spreadsheet-
style keyboard navigation as closely as possible.
Is there any way to avoid having to hit Enter to get into edit mode
for a TextInputCell
? I have tried overriding
TextInputCell.onBrowserEvent()
to call onEnterKeyDown()
when a focus
event is received, but that didn't work.
Is there any way to use Tab and Shift-Tab to navigate between columns instead of LEFT-ARROW and RIGHT-ARROW? CellTable seems to be hardcoded to use left and right arrows and difficult to extend.
After quite a bit of work trying, we determined that CellTable was not extensible enough to do what we needed. We ended up extending GWT's Grid class, taking design cues from CellTable to make it perform well enough for our needs.
In our use case, 80% of page views will display less than 10 rows and we will never have more than 600 rows by 10 columns (< 0.5% of cases have more than 500 rows). Instead of a full-fledged flyweight pattern, we used a lazy loading pattern. When the Grid is initially populated, display-only widgets are used to show the data from the underlying value objects. A FocusHandler is attached to each display-only widget. When a user clicks or tabs into a display widget, the FocusHander swaps out the display-only widgets for that row with the editable widgets.
Display-only widgets are restricted to lightweight widgets such as TextBox and CheckBox, so rendering time is acceptable. 100 rows x 5 columns render in less than 2 seconds. SuggestBoxes, DateBoxes, and other Composites are limited to only being used as editable widgets.
Advantages
Disadvantages
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With