0

Storing Ordering in database from a listbox or Grid

asked 2012-01-20 14:11:52 +0800

saboobaker gravatar image saboobaker
21

Hi,

The data that we are showing in a list box is bound to a table. This table has a column "display_order". We would like the users to use listbox to order the list entries (using drag and drop or any other mechanism) in their desired order and store this ordering using the display_order column.

How is this possible to do?

Regards,
Sohail

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2012-02-04 03:15:58 +0800

matthewgo gravatar image matthewgo
375

updated 2012-02-04 03:16:21 +0800

Hi Sohail,

I have created a simple sample here:

ZKFiddle-Link

Person.java
package j30itlj4$v2;

public class Person {

private String firstname;
private String lastname;

public Person(String firstname, String lastname) {
super();
this.firstname = firstname;
this.lastname = lastname;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}


}


MyComposer.java
package j30itlj4$v2;


import java.util.ArrayList;
import java.util.List;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.DropEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Column;
import org.zkoss.zul.Columns;
import org.zkoss.zul.Grid;
import org.zkoss.zul.Hlayout;
import org.zkoss.zul.Label;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listhead;
import org.zkoss.zul.Listheader;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Row;
import org.zkoss.zul.RowRenderer;
import org.zkoss.zul.Window;

public class MyComposer extends GenericForwardComposer {

private ListModelList model;
private Window win;
private Grid grid;
private Listbox listbox;

public MyComposer(){
List list = new ArrayList();
list.add(new Person("Lee", "CW"));
list.add(new Person("Lin", "Dan"));
list.add(new Person("Peter", "Gade"));
list.add(new Person("Taufik", "Hidayat"));
model = new ListModelList(list);
}

/* (non-Javadoc)
* @see org.zkoss.zk.ui.util.GenericForwardComposer#doAfterCompose(org.zkoss.zk.ui.Component)
*/
@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
Hlayout hl = new Hlayout();
final Listbox listbox = new Listbox();
final Grid grid = new Grid();
Columns cls = new Columns();
Column cl = new Column("Column1");
cls.setParent(grid);
cl.setParent(cls);
Listhead lh = new Listhead();
Listheader lher = new Listheader("Column2");
lher.setSort("auto(lastname)");
lh.setParent(listbox);
lher.setParent(lh);

listbox.setWidth("300px");
grid.setWidth("300px");
listbox.setItemRenderer(new ListitemRenderer(){
public void render(final Listitem listitem, Object arg1) throws Exception {
listitem.setDraggable("true");
listitem.setDroppable("true");
listitem.addEventListener("onDrop", new EventListener(){

public void onEvent(Event event) throws Exception {
ListModelList lml = (ListModelList) listbox.getModel();
Listitem dragged = (Listitem) ((DropEvent)event).getDragged();

Person p = (Person) lml.get(dragged.getIndex());
lml.remove(dragged.getIndex());
lml.add(listitem.getIndex(), p);
grid.setModel(lml);
}

});
Person p = (Person)arg1;
Listcell listcell = new Listcell();
listcell.setParent(listitem);
new Label(p.getLastname()).setParent(listcell);
}
});
grid.setRowRenderer(new gridRenderer());
listbox.setModel(model);
grid.setModel(model);
hl.setParent(win);
grid.setParent(hl);
listbox.setParent(hl);
}

class gridRenderer implements RowRenderer{

public void render(Row row, Object arg1) throws Exception {
Person p = (Person)arg1;
new Label(p.getFirstname()).setParent(row);
}
}


}


index.zul
<zk>
<window id="win" title="test" apply="j30itlj4$v2.MyComposer" border="normal">

</window>
</zk>


Basically You can do it by updating the model rather than updating the components.

As you can see, when I drag to move up and down the selected item in Columm2, it's the model doing the updates and save the model back to another table (grid) to display the latest order.

link publish delete flag offensive edit

answered 2012-02-09 12:52:13 +0800

saboobaker gravatar image saboobaker
21

Since we need to store the position after drop in the database. Should we just put the value of index in the database from above example. Is index a long value?

link publish delete flag offensive edit

answered 2012-02-13 03:50:55 +0800

matthewgo gravatar image matthewgo
375

Hi Sohail,
You can get the index by using Listitem.getIndex().
And the index is a int value.

link publish delete flag offensive edit
Your reply
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

RSS

Stats

Asked: 2012-01-20 14:11:52 +0800

Seen: 200 times

Last updated: Feb 13 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More