0

Listbox Column Drag & Drop

asked 2010-01-07 19:06:23 +0800

twiegand gravatar image twiegand
1807 3

Hello everyone,

Has anyone found a simple way to support drag-and-drop at the column level with a Listbox?

I've got drag-and-drop figured out using the Grid component, and with Listbox I've been able to get individual Listcells or Listheaders to move across columns, but I can't seem to be able to drag a column heading (Listheader) from one position to another and then have the individual details move accordingly.

If anyone could point me in the right direction, I'd sure appreciate it!

Kind regards,

Todd

delete flag offensive retag edit

9 Replies

Sort by ยป oldest newest

answered 2010-01-08 18:54:00 +0800

mklaene gravatar image mklaene
87

I'd like to see a good example myself. At one point, I found a link to a really good (and simple) example that showcased dragging/dropping columns and rows. Can't find it now.

link publish delete flag offensive edit

answered 2010-01-08 19:59:09 +0800

windeyu gravatar image windeyu flag of United States
288 3

I did drag-n-drop at the column level with a listbox before. Here is the rough idea

1. In my case, I dynamically create a Listheader for each of my table columns. I set them draggable and droppable.

listheader.setDraggable("someId")
listheader.setDroppable("someId")

2. add onDrop listener to each listHeader

    listHeader.addEventListener("onDrop", new EventListener() {
      public void onEvent(Event inEvent) throws Exception {
          DropEvent dropEvent = (DropEvent) inEvent;
          Component dragged = dropEvent.getDragged();
          int from = dragged.getParent().getChildren().indexOf(dragged);
          int to = listHeader.getParent().getChildren().indexOf(listHeader);
          ListModel model = getListMode()

          // then I have logic to swap cell data between the two columns in my listModel
          // create a new ListitemRenderer based on my modified listModel
          // call setItemRenderer(ListitemRenderer)
          // call renderAll()

          // finally I swapped the positions of two listHeader objects within their Listhead parent.
          Component toObject = (Component) listHead.getChildren().get(to);
          dragged.setParent(null);
          if (to > from) {
              listHead.insertBefore(dragged, toObject.getNextSibling());
          } else {
              listHead.insertBefore(dragged, toObject);
          }
          // re-evaluate the first-column checkmark boxes and geometry.
          invalidate();
      }
   }

I think the code that swaps the model content can be simplified without ListitemRenderer. I used it because I have my own complicated listModel subclasses.

link publish delete flag offensive edit

answered 2010-01-28 04:32:54 +0800

lb gravatar image lb
129 2

@windeyu

Hi, your Code helped me very much.
I also try to make my columns drag- and droppable. I also have a ListitemRenderer.
The problem is, that my Renderer does not render it's items depending on listheaders.
How can I do that?
Or how could the swap be simplified?

link publish delete flag offensive edit

answered 2010-02-01 22:28:32 +0800

PeterKuo gravatar image PeterKuo
481 2

@lb
"how could the swap be simplified?"
You may use an integer array as mapping.
And according that array to decide how to arrange the columns.
Renderer has to reference that array too.

link publish delete flag offensive edit

answered 2010-02-02 04:15:20 +0800

lb gravatar image lb
129 2

@PeterKuo

Thanks for your answer.
Sorry but I still do not understand, how I can connect the listheader and the cells to the array.
Could you maybe post some sample code? I really would appreciate it.

Thanks!

link publish delete flag offensive edit

answered 2010-02-02 05:17:52 +0800

PeterKuo gravatar image PeterKuo
481 2

For example, you have an integer array [1,2,3]
If you swap the column 1 and 2, you can record it as [2,1,3]

When your render the content, you look into the array, and render column2, column1, and then column3.

link publish delete flag offensive edit

answered 2010-02-02 20:09:53 +0800

windeyu gravatar image windeyu flag of United States
288 3

@lb

PeterKuo pointed to the right direction. Here is a little more details of how I did it.

1. I have my own Listbox subclass, where I have a List variable of column IDs (which is the array PeterKuo described). My listbox object is initialized with data of List<Map>, where Map key is the column ID, Map value is the value of that column.
2. In the "onDrop" handler where I commented "swap cell data between the two columns", I swapped the two column IDs in the List variable inside my Listbox subclass object.
3. My new ListitemRenderer subclass is given the modified Listbox subclass object.
4. When the ListitemRenderer.render(Listitem, Map) is invoked, I look up the Map value based on the column ID in the order specified by my List variable of column IDs. I created a Listcell for each map value.

I hope it helps.

link publish delete flag offensive edit

answered 2011-03-02 00:01:37 +0800

yaryan997 gravatar image yaryan997
210 2

@windeyu

Hi..
Yours problem is resolved so can you help me to solve my problem..
My basecontroller calls the OnCreate$filterbar

public void onCreate$filter_bar() throws Exception {
		logger.info("ON CREATE EXECUTE");
		System.out.println("Create");
		System.out.println("Service Id initial " +getCkServiceIds());
		
		//ListModelList
		
				
		//lbox_season.setModel(new ListModelList(getCertilogoServiceDao().getAllSeason(this.getCkServiceIds())));
		lbox_service.setModel(new ListModelList(getCertilogoServiceDao().getAllServices(this.getCkServiceIds())));
		<b >lbox_service.setItemRenderer(new ServiceListModelItemRenderer());</b>
		
		ListModelList lml_service = (ListModelList) lbox_service.getModel();
		//ListModelList lml_season = (ListModelList) lbox_season.getModel();
				
		logger.info("Done");
	}
	


when my lbox_service.setItemRenderer(new ServiceListModelItemRenderer()); line is called having code


public class ServiceListModelItemRenderer implements ListitemRenderer,Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private static final Logger logger = Logger.getLogger(ServiceListModelItemRenderer.class);

	public void render(Listitem item, Object data) throws Exception {
		// TODO Auto-generated method stub
		final CertilogoService service_list = (CertilogoService) data;
		
		final Listcell lc = new Listcell(service_list.getServiceName());
		lc.setParent(item);
				
		item.setAttribute("data", data);
		//item.appendChild(lc);
		
	}

}

My console gives an error ..

 java.util.HashMap cannot be cast to com.certilogo.ecc.backend.entities.CertilogoService
	at com.certilogo.ecc.frontend.ServiceListModelItemRenderer.render(ServiceListModelItemRenderer.java:22)

I understand that my values from query gives me a Map value but how to solve that????

my Query for lbox_service.setModel(new ListModelList(getCertilogoServiceDao().getAllServices(this.getCkServiceIds()))); is

	@SuppressWarnings("unchecked")
	public <T>List<T> getServices(String serviceIds) {
		// TODO Auto-generated method stub
		System.out.println("Executing Service");
		System.out.println("Service Id>> " +serviceIds);
		Query query;
		if(serviceIds.equals("") || serviceIds.equals(null)) {
			query = entityManager.createQuery("SELECT new map (s.serviceId as serviceId, s.serviceName as serviceName) from CertilogoService s");
		} else {
			query = entityManager.createQuery("SELECT new map (s.serviceId as serviceId, s.serviceName as serviceName) from CertilogoService s where serviceId in("+serviceIds+")");
		}
		
		List result = query.getResultList();
	
		System.out.println("Result Value :" +result.get(0));
		System.out.println("Query :" +result);
		return result;

	}

My filter bar.zul page is

<?xml version="1.0" encoding="UTF-8" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">


	<window id="filter_bar"
		border="none"
		apply="${baseController}" closable="false" width="800px" height="520px"
		sizable="true">
		<grid>
			<columns>
				<column label="Select Service" width="50%">
					<listbox id="lbox_service" mold="select" rows="1">
						<listitem self="@{each=each1}" label="@{each1.serviceName}" value="@{each1.serviceId}"/>
					</listbox>
				</column>
				
				<column label="Select Season" width="50%">
					<listbox id="lbox_season" mold="select" rows="1">
						<listitem self="@{each=each1}" label="@{each1.season}" value="@{each1.seasonId}"/>
					</listbox>
				</column>
				
			</columns>
	</grid>				
	</window>
</zk>


help me to get out of this problem...

Best Regards
Yogendra

link publish delete flag offensive edit

answered 2011-03-02 03:36:39 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2011-03-02 03:38:17 +0800

Yogendra,

1. DON'T CROSS POST. Means do not ask the same in different threads because it costs double time for guys who will help you. We have already told you this for a few days.
2. Please do not append your questions on threads that are handle others. Post your question in a new thread.

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: 2010-01-07 19:06:23 +0800

Seen: 2,238 times

Last updated: Mar 02 '11

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