Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    ListGrid or HStack?

    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);

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

    Comment


      #3
      They are the same images as the ones inserted in my initial post.
      Thank you.
      Attached Files

      Comment


        #4
        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.

        Comment

        Working...
        X