ListGrid, TabSet and ScrollBar

[jperin]

Hi Isomorphic,

I try to create a specific user interface, but I'm being lost with the scrollbar of the listgrid.

When the UI is loaded only the listgrid is displayed, when double clicking on a record this one will be opened in a tab.
As the listgrid is not yet in a tab, I create a tabset, I attach the listgrid as first tab and the record as second tab.
When closing the last tab of the record, the tabset is removed and the listgrid is attached to the layout.

Here is a standalone code

final VLayout vLayout = new VLayout();  
vLayout.setMembersMargin(15); 
vLayout.setHeight(400);
vLayout.setWidth(600);

final ListGrid supplyItemGrid = new ListGrid();
supplyItemGrid.setID("supplyList");  
supplyItemGrid.setAutoFetchData(true);  
ListGridRecord[] record = new ListGridRecord[100];
		for(int i = 0;i<100;i++){
			record[i] = new ListGridRecord();
			record[i].setAttribute("LOGIN", "name"+i);
			record[i].setAttribute("ID", i);
			
		}
		supplyItemGrid.setData(record);
ListGridField nameField = new ListGridField("LOGIN", 150);
ListGridField idField = new ListGridField("ID", 100);
supplyItemGrid.setFields(nameField, idField);
supplyItemGrid.setSelectionType(SelectionStyle.SINGLE);
supplyItemGrid.addCellDoubleClickHandler(new CellDoubleClickHandler() {
	
	@Override
	public void onCellDoubleClick(CellDoubleClickEvent event) {
		if(tabSet == null){
			tabSet = new TabSet();  
			Tab gridTab = new Tab("Grid");
			vLayout.removeMember(supplyItemGrid);
			supplyItemGrid.deparent();
			gridTab.setPane(supplyItemGrid);
			tabSet.addTab(gridTab);
			vLayout.addMember(tabSet);
		}
		Tab tab = new Tab(event.getRecord().getAttribute("LOGIN"));
		tab.setCanClose(true);
		tabSet.addTab(tab);
		tabSet.addCloseClickHandler(new CloseClickHandler() {
			
			@Override
			public void onCloseClick(TabCloseClickEvent event) {
				if(tabSet != null && tabSet.getTabs().length == 2){
					tabSet.selectTab(tabSet.getTabs()[0]);
					supplyItemGrid.deparent();
					tabSet.deparent();
					vLayout.removeMember(tabSet);
					vLayout.addMember(supplyItemGrid);
					tabSet = null;
				}
				
			}
		});
		HLayout hLayout = new HLayout();
		hLayout.setWidth100();
		hLayout.setHeight100();
		hLayout.addMember(new Label(event.getRecord().getAttribute("LOGIN")));
		tab.setPane(hLayout);
		tabSet.selectTab(tab);
		
	}
});
vLayout.addMember(supplyItemGrid);
vLayout.draw();

Example 1 :
When selecting a record without doing any scrolling, the listgrid and the record are displayed on two tabs.
When going back to the tab with the listgrid the record on the grid is shown and selected.
When closing the record tab, the tabset is destroyed and the listgrid is displayed in mainlayout with the record selected and shown.

Example 2 : (Start from the listgrid in mainlayout)
Same example as the first one, but first scroll to the middle of the grid and select the record with name50, the listgrid and the record are displayed on two tabs.
When going back to the tab with the listgrid, you can see that the record name50 is not displayed in the grid (scroll is on top) but if you scroll down to the middle of the grid you can see that the record is selected.
Same thing if you close the tab of the record...

Can you explain me, if is it a way to force the display of the grid showing the selected record? And how to do it?

Regards
Julien

I forgot to mention the version : Isomorphic SmartClient/SmartGWT Framework (v9.1p_2014-07-03/PowerEdition Deployment 2014-07-03)

[Isomorphic]

This a bit of a weird UI - we'd recommend that you instead start with a single tab that is showing the grid. This is better in two ways:

1. user experience: the end user knows that the grid is in the first tab because the user has already seen it there. This is a much better UE than having the grid appear to vanish and hoping the user guesses that it has been moved to the first tab

2. performance: removing the ListGrid and adding it to the tab causes it to clear() and draw() itself again. This is an expensive operation, and as a side effect of this, the current scroll position is dropped.

If you want to continue with the UI as you have it now, you will need to add a call to listGrid.scrollToRow() to ensure that the selected record appears in the ListGrid viewport.

[jperin]

Thanks a lot