ZK Reordering in Listbox

Question

I will want to use reordering of listitem in zk How can we do it when we have define tags(listitem,listcell) inside the zul file .I do Not

Answer 1

Listbox Reorder Columns

The folloing example could be found on zk fiddle too.

By Drag and Drop

First a dnd example that we extend to the popup way later.
The simple view:

The controller explained by comments:

public class LboxViewCtrl extends SelectorComposer {

    @Wire
    private Listbox lbox;
    @Wire
    private Listhead lHead;
    @Wire
    private Panel menu;
    @Wire
    private Listbox box;

    @Listen("onDrop = #lbox > #lHead > listheader")
    public void onDroplHead(DropEvent ev) {
        // get the dragged Listheader and the one it is dropped on.
        Listheader dragged = (Listheader) ev.getDragged();
        Listheader droppedOn = (Listheader) ev.getTarget();
        // then get their indexes.
        int from = lHead.getChildren().indexOf(dragged);
        int to = lHead.getChildren().indexOf(droppedOn);

        // swap the positions
        lHead.insertBefore(dragged, droppedOn);

        // swap related Listcell in all Listitem instances
        for (Listitem item : lbox.getItems()) {
            item.insertBefore(item.getChildren().get(from), item.getChildren().get(to));
        }

    }

}

Now we can dnd the columns.

With pop up

First we add a method that open up our menu if we click the button in Listbox.

@Listen("onClick = #reorderBtn")
public void onEditorOpen(Event e) {
    Window win = (Window) Executions.createComponents("/lbMenu.zul", this.getSelf(), null);
    win.doModal();
}

Of course we need a view for the pop up:

As well as a controller:

    @Wire
    private Window menu;
    @Wire
    private Listbox box;

    private Listhead lHead;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        // get the Listboxhead in which we like to change the the col order
        lHead = (Listhead) menu.getParent().query("#lbox > #lHead");
        // set the model for Listbox box in the pop up
        box.setModel(new ListModelList<>(lHead.getChildren()));
    }

    @Listen("onDrop = listitem")
    public void onDropInMenu(DropEvent ev) {
        // get the draged and dropped again
        Listitem dragged = (Listitem) ev.getDragged();
        Listitem droppedOn = (Listitem) ev.getTarget();

        // then get their indexes.
        int from = box.getItems().indexOf(dragged);
        int to = box.getItems().indexOf(droppedOn);

        // swap the positions
        lHead.insertBefore(lHead.getChildren().get(from), lHead.getChildren().get(to));

        // swap related Listcell in all Listitem instances
        for (Listitem item : lHead.getListbox().getItems()) {
            item.insertBefore(item.getChildren().get(from), item.getChildren().get(to));
        }

        // swap the items in pop up Lisbox as well
        box.insertBefore(dragged, droppedOn);
    }

If you want to have up/down buttons instead of dnd, just take a look at this zk demo.

Listbox Reorder Rows

It is very easy and can be found quickly in ZK-Documentation and on ZK Demosite.
Just add

sortAscending="XXX" sortDescending="XXX"

to zks Listhead component in your .zul, where XXX is evaluated to
java.lang.Comparator by data binding, el expression or set inside your composer.