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
Flexibility to use any of the
standard widgets
Extensibility - we're not limited by
the implementation choices made in
CellTable
Ease of development - prototyped in
less than 3 days of development
Performs well enough to fit our
needs
Tabs work out of the box as you would expect
Disadvantages
Not as scalable as CellTable. This
implementation is not going to render
thousands of rows
We have to maintain it ourselves
Related
The SAP standard controls which can display large aggregations (like tables) only bind and render a small number of items at a time. When the user scrolls down the list the then visible items are rendered. The number of rendered lines at a time are usually limited to 100.
I have not found any examples/documentation yet about the prptocol between the control and the data binding system to rerender the next chunk of items when the user wants to scroll.
As a workaround my own control contains the following overloaded bindAggregation method:
bindAggregation: function(sKey,oBindingInfo)
{
if (!oBindingInfo.length) oBindingInfo.length=50000; // Max number of lines to display
return sap.ui.core.Control.prototype.bindAggregation.apply(this,arguments); //call superclass
}
In addition my control uses overflow attributes to show scrollbars. It works but when the datasource is large performance suffers because all thousends of UI5 controls and DOM elements for the items are rendered.
Has anybody an example how to build a "dynamic" rendering like the table control is doing?
Perhaps create some events in your control that can trigger the next batch.
The following links might be usefull:
Handle Huge Data in UI5 Table
Pagination with a function
Creating additional triggers to load more data
I am using a DataGrid together with a ListDataProvider to display various row data in my application. For most cases, it was fine to fetch everything from the server at once.
Now, it appears to be necessary to fetch data on pagination steps. This means, my RPC call returns 10 items each time and the total count of possible results.
The total count is used to setup the attached SimplePager by manually calling datagrid.setRowCount(totalCount, true) after having set the row data. After is important here,
because setRowData also triggers a setRowCount call with the concrete number of items (always 10 in my case).
The problem is that after having set the row count manually, another participant, a ScheduledCommand triggers a flushCommand which in turn triggers a setRowCount call which
sets the count back to 10. The consequence: the pager shows 1-10 of 10 and the pager controls are disabled.
How can I enforce a certain rowCount even if the ListDataProvider only has 10 items each time?
You might suggest to use an AsyncDataProvider. However, there already is a quite complex generic design (AbstractTablePresenter<DTO, ...> implementing all the logic to fetch data and push it to a generic display)
which is backed by ListDataProviders. Hard to explain, but actually, I would prefer keep using the ListDataProvider.
For my usecase, the easiest fix was to subclass my AbstractTablePresenter for the on-demand case and use an AsyncDataProvider which brings all the features I need. The hurts concerning my design was less heavy than expected (knocking on my shoulders ;-) ).
Tried to subclass ListDataProvider first but the relationship of data, rowCount, rowCountEvents and the attached pager objects is so manifold that you would end up overriding most of the methods of ListDataProvider and your pager implementation.
I have a case where my DataGrid might contain thousands of rows of data. My page size is only 50. So I want to get only so much data onto the client from server and load rows of data as and when required. Is there a default support from GWT to do that?
I tried using PageSizePager but then realized that the data is already sent to the client and that defeats what am trying to achieve.
Thanks.
Indeed. The aim (among others) of DataGrid, as well as of any other cell widget, is to display large data sets as fast as possible by using pagination and cells.
I suggest you to start with the official docs about CellTable (same applies to DataGrid), and pagination/data retrieval.
You'll probably need an AsyncDataProvider to asynchronously fetch data and an AbstractPager (say, SimplePager) to force retrieval of more data.
You can also decide to extend the current range of rows (say, infinite scroll), instead having multiple pages (by using KeyboardPagingPolicy.INCREASE_RANGE).
In general, the question is too general and can be hardly answered in few lines (or without specify more). The bits are all in the links above, and don't forget to have a look at the cell widgets samples in the showcase, as they cover almost everything you will need.
Hope to get you started.
I must do a RPC call when my Presenter is revealled. That call result in a String[] with large amount of data. But this call is very very slow. It takes about 1min to finish.
After some tests, i discovered that ListBox.addItem() takes over 30% of this call. It's a huge time for just add String on that Widget.
What can I do to minimize this time?
Assuming that i need to load everything when my Presenter reveal.
Things that I've already done:
Put my Query inside a View(Doesn't affect too much)
Server read a Txt file instead of call DB(worst then View).
Use Collections classes ArrayList,Vector...(Vector reduced time by 5%)
I've noticed that GWT designed a LightweightCollections to improve use of Collections on Client side(It's my next step).
But what can I do about ListBox?
Too much choice is no choice.
You will not be able to tune up GWT Listbox/ValueListBox for purpose of displaying such huge amount data ( i am guessing entries in 1000's considering 20 seconds i.e 30% of 1 min). GWT Listbox is meant for selection. You cannot expect user to see 1000's of values , scroll and then select. Its a User Interaction nightmare.
The right approach is use to Async loaded SuggestBox for such huge data. With SuggestBox you can filters and display lesser data as choice based on users input keys.
If using SuggestBox is not feasible you must give a try for CellList in Cell Widgets ( they might show better performance ) - https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets
I am not sure but give GWTChosen a try - http://jdramaix.github.com/gwtchosen/
I need to display a big amount(1000+) of similar widgets (each widget
contains photo + descrption - about 400*400 px total) in a table -
say, 10 rows and 2 columns per page. I don't need option to select,
drag, highlight or do smth else with these widgets - just display
them.
It seems that FlexTable doesn't support paging. CellTable does, but it
seems to be too complicated and best suited for displaying different
data in different columns while I need just to place similar widgets
in each cell.
So, I'm a bit confused about what table to use and need some help
about this.
Thanks in advance!
Celltable and family are definitely the way to go. From the docs :
Cell widgets (data presentation widgets) are high-performance,
lightweight widgets composed of Cells for displaying data. Examples
are lists, tables, trees and browsers. These widgets are designed to
handle and display very large sets of data quickly.
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets
And they support server side paging...
Your case from what I read.