ZK Reordering With Listbox Without Drag And Drop Event - zk

Question

As i am trying This example well define by Nabil Abdel-Hafeez
It is working fine with some small issue which i already mentioned in tracker as issue. But i will want to Open a DualBox modal window in which one listbox contain all header name and other listbox will contain which header we will want to show for a listbox(I did this with getitemrendered ).I will want to use same ZUL Code without getitemrendered method.But user can hide the header which he/she do not want to see for a listbox. Anyone did this type of things?
Here
The green image with + Sign showing same thing which i will want to implement.
As I was trying the Nabil Abdel-Hafeez but my issue is that i will provide duallistbox where user can select which header he/she will want to see in listbox, user can select header by clicking on button ,user can add one header or all header from duallistbox and when user click on the Reorder button of duallistbox then it will reorder .In Nabil demo he is doing something like this..
for (Listitem item : lHead.getListbox().getItems()) {
item.insertBefore(item.getChildren().get(from), item.getChildren().get(to));
}
But if user selecting multiple how we will track which will come first which second and so on..

Answer 1

You can try combine MVVM with forEach so you can construct String array to display, this works since 6.0.2
e.g.,
zul
<zk>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('test.TestVM')">
<listbox model="#load(vm.model)">
<listhead>
<listheader forEach="${vm.headers}" label="${each}" />
</listhead>
<template name="model" var="cells">
<listitem>
<listcell forEach="${cells}" label="${each}" />
</listitem>
</template>
</listbox>
<button label="original seq" onClick="#command('originalSeq')" />
<button label="reverse" onClick="#command('reverse')" />
</div>
</zk>
VM
package test;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import java.util.*;
public class TestVM {
private int[] _original = {1, 2, 3};
private int[] _reverse = {3, 2, 1};
private int[] _seq = _original;
private List _rawData;
public String[] getHeaders () {
String[] headers = new String[_seq.length];
for (int i = 0; i < _seq.length; i++) {
int idx = _seq[i];
headers[i] = (idx == 1? "First Name" :
idx == 2? "Last Name" :
idx == 3? "Age" : "");
}
return headers;
}
public ListModel getModel () {
if (_rawData == null) {
getRawData();
}
List modelData = new ArrayList();
for (int i = 0; i < _rawData.size(); i++) {
Person data = (Person)_rawData.get(i);
String[] cells = new String[_seq.length];
for (int j = 0; j < _seq.length; j++) {
cells[j] = data.getValue(_seq[j]);
}
modelData.add(cells);
}
return new ListModelList(modelData);
}
public void getRawData () {
_rawData = new ArrayList();
_rawData.add(new Person("First Name 01", "Last Name 01", 21));
_rawData.add(new Person("First Name 02", "Last Name 02", 22));
_rawData.add(new Person("First Name 03", "Last Name 03", 23));
}
#Command
#NotifyChange("model")
public void originalSeq () {
_seq = _original;
}
#Command
#NotifyChange("model")
public void reverse () {
_seq = _reverse;
}
class Person {
private String _firstName;
private String _lastName;
private int _age;
public Person (String firstName, String lastName, int age) {
_firstName = firstName;
_lastName = lastName;
_age = age;
}
public String getFirstName () {
return _firstName;
}
public String getLastName () {
return _lastName;
}
public int getAge () {
return _age;
}
public String getValue (int i) {
return i == 1? getFirstName() :
i == 2? getLastName() :
i == 3? getAge() + "" : "";
}
}
}
Regarding forEach, please refer to ZK Iterative Evaluation
Edit
Fully binded sample at ZK fiddle
Listbox Reorder Cells