0

display list items vertically in multiple columns

asked 2017-09-27 12:47:59 +0800

mpatt gravatar image mpatt
3 2

updated 2017-09-27 14:23:17 +0800

cor3000 gravatar image cor3000
3504 1 7
ZK Team

current code sample

<center border="none">
          <div visible="@load(not empty vm.otherObjects)" height="300px" >
            <radiogroup id="otherObjRadioGroup" />
            <portallayout id="otherObjectsPortal" children="@load(vm.otherObjects)">
                    <template name="children">
                          <portalchildren width="25%" style="padding:3px;">
                            <panel>
                              <panelchildren>
                                <vbox align="left" width="100%" height="25px" style="padding:2px;">
                                <radio id="${each}" label="@load(each)" radiogroup="otherObjRadioGroup" style="padding:3px;font-size:15px"/>
                                </vbox>
                              </panelchildren>
                            </panel>
                          </portalchildren>

                    </template>
            </portallayout>
          </div>
    </center>

=============================== This is displayed horizontally now as below - 1.Airplane 2.Apple 3.Banana 4.Baseball_glove
<line break=""> 5.Bear 6.Car 7.cow 8.Dog

But i want them like following - 1.Airplane 3.Banana 5.Bear 7.cow <line break=""> 2.Apple 4.Baseball_glove 6.Car 8.Dog

delete flag offensive retag edit

Comments

Thats right. I have more items and count is dynamic. That's why i wanted to avoid this index%2 and processing part. But anyway I will give it a check. Thank you!

mpatt ( 2017-09-27 16:01:19 +0800 )edit

Exactly what I mean... so you just need to decide on a display order and the component will follow. Unfortunately that's a decision only your code can make. Whether it's adding a new column for item 9,10 or a new row - it's up to you.

cor3000 ( 2017-09-27 16:40:28 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2017-09-27 14:57:56 +0800

cor3000 gravatar image cor3000
3504 1 7
ZK Team

updated 2017-09-27 15:07:38 +0800

All you need to do is change the order in your collection "otherObjects" and the rendering will reflect that order.

This doesn't require any feature in ZK and can be done with plain java.

public void reorder(List<String> list) {
    List<String> toAppend = new ArrayList<>(list.size() / 2);
    Iterator<String> it = list.iterator();
    int index = 0;
    while(it.hasNext()) {
        String item = it.next();
        if(index % 2 == 1) {
            it.remove();
            toAppend.add(item);
        }
        index++;
    }
    otherObjects.addAll(toAppend);
}

init() {
    // ... load the objects somehow
    reorder(otherObjects);
}

Here a runnable version on ZK-Fiddle using the same reorder method: http://zkfiddle.org/sample/2322jsj/1-reorder-items-in-list

Since your question wasn't more specific this is just a simple solution for 8 items. It might be more interesting for you to decide what to do if there are more or less than 8 items in your list.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2017-09-27 12:47:59 +0800

Seen: 10 times

Last updated: Sep 27