GWT table with vertically aligned columns, celltree in first column - gwt

I'm wondering how well I can use GWT (or smart GWT) to build something like:
where I have:
A celltree in the first column that has a scrollbar at the bottom.
for each element in the tree, there are columnns 2 and 3 as shown, and columns 2 and 3 stay vertically lined up with the top.
This means if the celltree is deeply nested, the user would have to scroll it at the bottom, which is fine. I need the vertical columns to stay aligned.

Put a CellTree and a DataGrid side by side in a HorizontalPanel or LayoutPanel. Add a selection handler to a tree which refreshes the content of a DataGrid. If you set the same row height in a DataGrid as the height of a TreeItem, and prevent both from wrapping, they would align nicely.
You can even add a background to your CellTree items to match the DataGrid even/odd row backgrounds, but you will have to do it in code after every selection event on a non-leaf item in a CellTree.

Related

How can I set a bottom position on a horizontally scrollbar in Ag Grid?

I am trying to position the horizontally scrollbar on a bottom position when some field of the table is changed.I tried with : Scrolling Ag Grid using ensureIndexVisible()
But as least I know it is only for vertical scrollbars
There is also a method ensureColumnVisible(colId), from docs (in the same section you are refering to):
Ensures the column is visible, scrolling the table if needed.

how to freeze a specific row in flextable using GWT

I have made a table showing data in various rows using GWT flextable but i have to freeze top rows at a relative position to the parent container. how to do that . please help me out in this issue ?
You must create 2 flextables to achieve this.
The first is just the normal flextable you have currently.
The second contains only the headers, and has a fixed position on screen (the releative position).
The first flextable is always visible. The 2nd one is invisible at init.
Then when scrolling check if the relative position is reached. When it is reached make the 2nd flexTable visible. Now the 2nd flextable will appear on top of the first, and will give the illusion of it being a fixed header.

Can't get vertical layout group with scrolling working

I've got a panel which sits above my canvas and slides out upon clicking a button. I want to populate this panel with several objects (the number will be determined at runtime). Since the number of objects can exceed the number that would reasonably fit on a single row of the panel, I'd like to be able to scroll down with the mouse to new rows where the remaining objects have been populated.
To achieve this I've put a Scroll Rect and a Mask on the panel, created a child Image with a Vertical Layout Group to hold a series of child panels representing the rows that would hold the objects, and set the Image as the Content of the Scroll Rect.
The issue is that when I try to make one of the row panels a child of the Image object by dragging it to the Image in the Hierarchy, the anchors for the panel coalesce to a single point (the top left of the Image since it is set to Upper Left alignment) and when I try to manually drag the anchors to the appropriate position a box with a red X in it appears and expands in a manner that doesn't seem to correspond to the direction of the mouse.
Is this the right approach, and if so, how can I get this to work?
Thanks!

Using ListLayout for grouped items inside a ListView with GridLayout

Suppose I have a ListView with grouped data and a GridLayout. I'd like to have a vertical list for the items inside a group (each group represented in yellow) and the horizontal list for each group.
Can I do this using a ListView?
(the arrows represent the expected scrolling)
Keep in mind that this sort of combination of scrolling directions is not recommended according to the Windows design principles. A single panning axis gives a user a solid feel as if they're interacting with real content, but combined scrolling tends to disorient. Especially when the user is scrolling with a mouse wheel.
It likely won't fail you in certification, but I thought I'd just give you some food for thought.
You could have nested ListViews: one, which scrolls horizontally and that displays the items from the groupedDataSource as a normal itemDataSource.
Then have the item renderer for the group items create their own ListViews with a vertical ListLayout in which they display the items from their respective group.

GWT 2.4 Data Grid -- Horizontal Scroll Bar obscures last row

The new DataGrid widget in GWT 2.4 automatically generates a horizontal scroll bar when the display viewport for the table is not as wide as the table itself, and a vertical scrollbar for the vertical case. Fine so far. But I have found that the scrollbar obscures the last row of the table. There is no filler space after the last row to allow you to vertically scroll a bit farther to let the last row completely enter the viewing space. That filler bar ought to be at least as tall as the scrollbar, and preferably a bit taller.
Any ideas for a work-around? I don't want to add empty data rows since these represents real rows in a real database.
I just noticed that if you select a row (even with NoSelectionModel, there is a "select" where the row turns pale yellow), then tap the up and down arrows on the keyboard, the DataGrid rolls up and down, including pulling any rows obscured by the header or footer or horizontal scrollbar entirely into view.
Good to know. Will have to train the users on that little trick.