I have a DataGrid that I want to add pagination to. Following the example from the docs, I have:
dataProvider.addDataDisplay(resultsGrid);
// Create a Pager to control the table.
SimplePager.Resources pagerResources = GWT.create(SimplePager.Resources.class);
pager = new SimplePager(TextLocation.CENTER, pagerResources,true, 50, true);
pager.setDisplay(resultsGrid);
However, I get neither the 'forward' nor 'fast forward' buttons:
Is there something I"m missing? Do I need to do something when the DataProvider changes?
Judging by your previous question and screenshot, the remaining pager buttons on the right are simply hidden under the west pane.
Related
I'm using setScrollMode(ScrollMode.AUTOY) to enable vertical scrolling when necessary on a VerticalLayoutContainer. However, the scrollbar overlaps the content of the container. The only way around this that I've seen is to call setAdjustForScroll(true). The problem with this is that The panel will then always reserve space for a scrollbar even when one is not present.
Is there a way to tell GXT to only adjust for a scrollbar when one is present? Or perhaps use an event handler (eg ResizeHandler) and check if the scrollbar is currently visible?
Instead of trying to check in a handler if the scrollbar is visible, isn't it just easier to not have the content in the VerticalLayoutContainer?
For example I have:
VerticalLayoutContainer vp = new VerticalLayoutContainer();
vp.setScrollMode(ScrollMode.AUTO);
vp.add(layer1, new VerticalLayoutData(1, -1));
vp.add(layer2, new VerticalLayoutData(1, -1));
vp.add(layer3, new VerticalLayoutData(1, -1));
the layers(1-3) contain the actual content and are different types Ex. VBoxLayoutContainer, Container, VerticalLayoutContainer.
It works for me. I don't think it is relevant but I am adding the vp to a CenterLayoutContainer that is added to the root panel.
I have some data that I'm displaying in a CellTable which is inside a SimplePager. The pagination navigation options are shown in the bottom, I was wondering if it would be possible to show these on the top as well as the bottom of the data.
I want to do this because depending on the browser size, the user may not be able to see the controls.
I want the navigation controls to show both before and after the table data.
Yes, just add two pagers:
final AbstractPager pager = new SimplePager();
pager.setDisplay(cellTable);
contentPanel.add(pager);
contentPanel.add(cellTable);
final AbstractPager pager2 = new SimplePager();
pager2.setDisplay(cellTable);
contentPanel.add(pager2);
The pager shows on top if you add pager before adding celltable in layout.
CellTable table=new CellTable();
VerticalPanel containerPanel = new VerticalPanel();
SimplePager pager1 = new SimplePager(TextLocation.CENTER);
containerPanel.add(pager);
containerPanel.add(table);
SimplePager pager2 = new SimplePager(TextLocation.CENTER)
containerPanel.add(pager2)
Thus, you have to create two pager and add celltable in between of those.
I am working on a CellTable with a SimplePager. My paging works fine in the sense when i set the page size to be 5 only 5 records are being displayed. My question is that do next and previous buttons come by default or do we have to configure them. I have seen the show case example code and i do not see any external configurations . my SimplePager code is as follows:
//create pager
SimplePager.Resources resources = GWT.create(SimplePager.Resources.class);
SimplePager simplePager = new SimplePager(TextLocation.CENTER, resources , false, 0, true);
simplePager.setDisplay(cellTableSearchResults);
simplePager.setPageSize(5);
// create data provider
ListDataProvider<GridDTO> dataProvider = new ListDataProvider<GridDTO>();
dataProvider.addDataDisplay(cellTableSearchResults);
dataProvider.setList(components);
Please help.
SimplePager is a widget containing those buttons. Did you simply forgot to display it?
Set page size to celltable by cellTable.setPageSize(5);
Don't set simplepagers page size simplePager.setPageSize(5);
this will split cell table to show 5 rows as visible Items.
I'm breaking my head since a whole day now but cannot find a solution, I hope someone can help me.
I'm trying to create a simple SmartGWT ListGrid with checkboxes and for some reason I can only check checkboxes but not uncheck them.
Once the checkbok is checked there is no way to uncheck it.
Below the code I'm using to create the grid.
Here I first instantiate the grid that is populated later with a call to the server.
Any idea of what I'm doing wrong? Anything wrong with the initialisation maybe?
Thanks in advance!!
[...]
ListGrid hotelsGrid = new ListGrid();
hotelsGrid.enableHiliting(false);
hotelsGrid.setCanSort(false);
hotelsGrid.setCanResizeFields(false);
hotelsGrid.setShowHeader(false);
hotelsGrid.setAutoFitData(Autofit.BOTH);
hotelsGrid.setStyleName("selectGrid");
hotelsGrid.setCanEdit(false);
hotelsGrid.setShowHover(false);
hotelsGrid.setShowRollOver(false);
hotelsGrid.setShowSelectedStyle(false);
hotelsGrid.setSelectionAppearance(SelectionAppearance.CHECKBOX);
[...]
private void initGrid(String[] sParams){
ListGridField flagField = new ListGridField("flagField", "Status", 40);
flagField.setAlign(Alignment.CENTER);
flagField.setType(ListGridFieldType.IMAGE);
flagField.setImageURLPrefix("flags/");
flagField.setImageURLSuffix(".png");
ListGridField textField = new ListGridField("textField", "Meaning");
hotelsGrid.setFields(flagField, textField);
hotelsGrid.setData(getSelectRecords(sParams));
}
It's not clear how your code sample above is related to a clickable checkbox - your code doesn't make any attempt to create a field with checkboxes??
All you need to do to get a clickable checkbox is declare a field of type "boolean" and setCanToggle(true). setCanToggle(true) allows it to be toggled with one click without needing to have editing enabled for any other fields.
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();
}