gwt - DataGrid won't show all data inside, even having scroll - gwt

I have a DataGrid in an AbsolutePanel.
I set it size via myDataGrid.setSize("100px", "231px");
It is supposed to show 140 data items, but it only shows like 60 or something like that, with automatic vertical scroll bar presented.
But why it shows only part of the data, not full set?

I assume you use a default constructor for the DataGrid. By default the page size is 50, so it will only display 50 records.
Either you use another cosntructor (DataGrid(int pageSize)) or you add a Pager (i.e. SimplePager)

Related

How can I change the number of displayed suggestions with Antd Autocomplete?

By default Autocomplete seems to show 8 suggestions at a time, the rest you will have to scroll down to see it. There are no component property related to this number in Antd documentations. Is there any way to change that to another fixed number? How about making it display all?
Internally Autocomplete use the component Select and make all Select properties available, even internal props. listHeight can be used to increase the height of the suggestion dropdrown list. As note in Antd's Select documentation:
Virtual scroll internal set item height as 32px
To make Autocomplete display 10 items for example, set listHeight={320} to Autocomplete. To make it display all items, pass an arbitrary large number to listHeight like 999999 or Number.MAX_SAFE_INTEGER

Access Form layout and design: Header: How do I make my header section look like Google

I would like to rip off Google's design for my Continuous Form. The detail section of the form is set up to display N number of records resulting from a search, and thus cannot be used to create this effect (i think). Everything must go in the header section.
there are 2 primary issues I would like to address in this question:
Two toned background. The header section should have a grey stripe and a white stripe. This stripe needs to extend the full width of the form, which is variable and will depend on the user. (i'm using tabs not pop-ups)
How to right justify certain elements of the header so that they stay close to the right edge, wherever that may fall, just like your account information on Google.
The "Search Results" in the detail section are loaded by setting the form's recordSource to the results of a query defined in VBA, which takes parameters from the search box. The form is continuous.
Any ideas how to hack this into place?
Recent versions of MS Access provide improved form layout features when using the ACCDB database file format.
The screen captures below are based on a form in Access 2010. The second image is after the form width was expanded, but it's scaled down for display on this web page. However you can open those images directly to compare their relative widths.
The grey color is from the form header's Back Color property. The white box is a simple text box whose Back Color is white and Back Style is Normal (not Transparent).
The text box's Horizontal Anchor property is Both, and its Can Grow property is Yes. The other 3 items ("?", "Button 2", and "Button 3") are command buttons. Their Horizontal Anchors are set to Right and their Can Grow properties are No.
The result of those properties is that when the form expands, those command buttons maintain their size are are kept right-aligned within the form. And the text box stretches to fill the remaining available space.
Note this behavior is accomplished without any VBA code.
I think these layout capabilities were introduced in Access 2007 and perhaps refined in 2010.
For the background, use two rectangles with transparent borders, one back color gray, one white. You can size them to the form by using the form's InsideWidth property. For example:
Private Sub Form_Resize()
rect1.Width = Me.InsideWidth
rect2.Width = Me.InsideWidth
End Sub
I would do a similar thing for the buttons/images/etc you want right justified. Set their Left property relative to the form's width:
mySettingsButton.Left = Me.InsideWidth - 300
Keep in mind all the measurements are twips (1440 twips/inch)

ListGrid with auto size - missing columns

I'm using smartgwt ListGrid. The problem appears when it's empty, and if i manually set columns width, i can get some columns clipped in the view port and there is no horizontal scrolling so I can't access them.
But if I add an empty record, the scrollbar appears. I've fixed it by adding
setAutoFitData(Autofit.HORIZONTAL);
setAutoFitMaxColumns(3000);
setOverflow(Overflow.AUTO);
But I need to add some freezed columns to my listGrid. I'd like to use setFrozen(true) method, but its not compatible with setAutoFitData(Autofit.HORIZONTAL);
What I need is
to show a scrollbar if columns are out of the view port, even when list grid is empty.
some first columns must be frozen.
Everything works with the base List Grid with no additional options. But when i set
setShowEmptyMessage(false);
my scrollbar disappears.
Kind of workaround i've found:
setShowEmptyMessage(true);
setEmptyMessage(" ");

How to have the container adjust to a GWT grid?

I have a DataGrid with a SimplePager and when theres less than the predefined number of rows per page (in this case 15) the container will show those rows and leave a white space in between the grid and the simplePager (where the other rows would be).
I have seen some mentions on other sites about rendering datagrid first and then fit it into the container, but i have no idea what this means (Or at least, i don't think they're saying its as easy as removing it from the parent and re-attaching it, since i've tried that already).
Thanks in advance.
My proposition - resize container after data fetch, after rendering of grid. It will be just something like this:
container.setHeight(grid.getOffsetHeight() + "px");

GWT 2.4 DataGrid automatic scrolling when selecting an item

I am using GWT 2.4's new DataGrid in a project. I configured the DataGrid with a pagesize of 50.
The available screen is not big enough to display all items and thus a vertical scrollbar is shown (this is actually the main purpose for using a DataGrid in the first place).
I attached a SingleSelectionModel to the DataGrid in order to be able to select items.
This works fine so far.
However I also have another widget with which the user can interact. Based on that user action a item from the DataGrid should be selected.
Sometimes the selected item is not in the visible screen region and the user has to scroll down in the DataGrid to see it.
Is there any way to automatically or manually scroll down, so that the selected item is visible?
I checked the JavaDocs of the DataGrid and found no appropriate method or function for doing that.
Don't know if this works, but you could try to get the row element for the selection and use the scrollIntoView Method.
Example Code:
dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();
The answer above works pretty well, though if the grid is wider than your window and has a horizontal scroll bar, it also scrolls all the way to the right which is pretty annoying. I was able to get it to scroll down and stay scrolled left by getting the first cell in the selected row and then having it scroll that into view.
dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();
Don't have time to try it out, but DataGrid implements the interface HasRows, and HasRows has, among other things, a method called setVisibleRange. You just need to figure out the row number of the item that you want to focus on, and then set the visible range from that number n to n+50. That way the DataGrid will reset to put that item at the top (or near the top if it is in the last 50 elements of the list backing the DataGrid). Don't forget to redraw your DataGrid.
Have you already looked at this? If so, I'd be surprised that it didn't work.
Oh, and since this is one widget talking to another, you probably have some messaging set up and some message handlers so that when the user interacts with that second widget and "selects" the item, the message fires on the EventBus and a handler for that message fixes up the DataGrid along the lines I've described. I think you'll have to do this wiring yourself.
My solution, a little better:
dataGrid.getRow(model).scrollIntoView();
I got a Out of bounds exception doing the above.
I solved it getting the ScrollPanel in the DataGrid and used .scrollToTop() and so on on the ScrollPanel. However, to access the ScrollPanel in the DataGrid I had to use this comment:
http://code.google.com/p/google-web-toolkit/issues/detail?id=6865
As Kem pointed out, it's annoying the "scrollToRight" effect after the scrollIntoView. After me, Kem's solution gives a better behaviour than the base one as usually the first columns in a table are the more meaningful.
I improved a bit his approach, which scrolls horizontally to the first column of the row we want to be visible, by calculating the first visible column on the left before applying the scroll and then scrolling to it.
A final note: Columns absolute left is tested against "51". This is a value I found "experimentally" by looking the JS values in the browser's developer tool, I think it depends on the table's style, you may need to change/calculate it.
Below the code:
public void scrollIntoView(T next) {
int index = datagrid.getVisibleItems().indexOf(next);
NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells();
int firstVisibleIndex = -1;
for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++)
if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0))
firstVisibleIndex = i;
cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView();
}