ListGrid or HStack?

[alina.frey]

What is the best way to create a grid-like view that contains cells that span over two columns.
Please see attached images with what I want and what I get. I would like the date to span over two columns. What is the best way to achieve that?

What I want:



What I get:



Here is the code:

// entire header section
headerLayout = new HLayout();
headerLayout.setWidth100();
headerLayout.setHeight(100);
headerLayout.setLayoutMargin(10);
headerLayout.setShowEdges(true);

// header left setup
VLayout headerLeftLayout = new VLayout();
// application labels
titleLabel1 = new Label("Label1");
titleLabel1.setAlign(Alignment.LEFT);
titleLabel1.setValign(VerticalAlignment.TOP);
titleLabel1.setHeight(50);
titleLabel2 = new Label("Label2");
titleLabel2.setAlign(Alignment.LEFT);
titleLabel2.setValign(VerticalAlignment.BOTTOM);
titleLabel2.setHeight("25%");
titleLabel3 = new Label("Label3");
titleLabel3.setAlign(Alignment.LEFT);
titleLabel3.setValign(VerticalAlignment.TOP);
titleLabel3.setHeight("25%");
// add items to left header
headerLeftLayout.addMember(titleLabel1);
headerLeftLayout.addMember(titleLabel2);
headerLeftLayout.addMember(titleLabel3);

// header right setup
VLayout headerRightLayout = new VLayout();
headerRightLayout.setMembersMargin(20);

// stack layout for user and logout button
HStack topRightStack = new HStack();
// signed in user stack
HStack userStack = new HStack();
signedInAsLabel = new Label("Signed in as:");
signedInAsLabel.setAlign(Alignment.RIGHT);
signedInUserLabel = new Label();
signedInUserLabel.setAlign(Alignment.RIGHT);
userStack.addMember(signedInAsLabel);
userStack.addMember(signedInUserLabel);
userStack.setMembersMargin(10);
userStack.setAlign(Alignment.RIGHT);
logoutButton = new IButton("Logout");
logoutButton.setSize("100px", "25px");
logoutButton.setIcon(GlobalFieldMapping.LOGOUT_ICON);
topRightStack.addMember(userStack);
topRightStack.addMember(logoutButton);
topRightStack.setMembersMargin(10);
topRightStack.setAlign(Alignment.RIGHT);

// stack layout for date and about button
HStack bottomRightStack = new HStack();
HStack dateStack = new HStack();
dateLabel = new Label(dtf.format(new Date()).toString());
dateStack.addMember(dateLabel);
dateStack.setAlign(Alignment.RIGHT);
aboutButton = new IButton("About");
aboutButton.setSize("100px", "25px");
bottomRightStack.addMember(dateStack);
bottomRightStack.addMember(aboutButton);
bottomRightStack.setMembersMargin(10);
bottomRightStack.setAlign(Alignment.RIGHT);

// add items to right header
headerRightLayout.addMember(topRightStack);
headerRightLayout.addMember(bottomRightStack);

// add the right and left header pieces to parent layout
headerLayout.addMember(headerLeftLayout);
headerLayout.addMember(headerRightLayout);

[Isomorphic]

Hi Alina, it looks like you intended to attach a picture of what you want, but it didn’t come through. Please try again.

[alina.frey]

They are the same images as the ones inserted in my initial post.
Thank you.

[Isomorphic]

Generally if you have repeating data, especially a larger data volume, we would recommend a grid.

It's not clear why you want to combine what looks like two data values into a single column - when you consider the default behavior of a grid, keeping them as two columns means that you can separately sort, filter and group by the values, all valuable features.

So we would basically recommend keeping them as separate columns instead, or just creating a single column for both values, but just using a separator of some sort in the column title (eg "|") if you want to show both values in one cell for whatever reason.