0

Listbox multiple and single selection separately

asked 2012-11-07 17:20:34 +0800

abreodaniel gravatar image abreodaniel
6

Hi, I'm using the ZK 5.0.7 version, and I'm trying to use multiple and single selection separately in the same listbox, to give the following behavior to listbox:
• When checkbox is selected: Don´t change the style of the selected row, but component must put this item in selectItems list.
• When other component of the row is selected: change the style to row selected, and don´t put in selectitems list, but return this item in the getSelectedItem() method.

This behavior is the listbox component or anyone knows how I can do?

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2012-11-21 11:00:41 +0800

samchuang gravatar image samchuang
4084 4

Hi, first, you can refer to doc, see if any setting you can use, for example

Nonselectable Tags
Deselect Others when Clicking an Item with Checkmark
Toggle Selection when Right Clicking an Item with Checkmark

secondable, I am not sure I understand what you try to do. Can you provide a sample code and explain in more detail ?

link publish delete flag offensive edit

answered 2012-11-22 23:11:11 +0800

abreodaniel gravatar image abreodaniel
6

updated 2012-11-22 23:12:31 +0800

Hi, thanks for the interest, and i had tried the first option but is not the behavior I want, today i was tried the option 2 "Deselect Other ..." but i did not notice any change.
Here's an example:
I have a listbox of patients in a hospital, and two buttons one to remove and another to see the details of a patient.
The delete button is used for multiple patients.
The details button is used for only one patient.
Option One:
The user clicks on the checkbox for a row, the row does not change color. And when you use the delete button deletes the selected patients.
Option Two:
The user clicks on another component of the row of the patient, different to checkbox, the row changes color and the checkbox does not change, and the user can view the patient information by using the details button.

link publish delete flag offensive edit

answered 2012-11-30 11:02:28 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi abreodaniel,

You can try "combine" two listbox, please refer to the sample:
http://zkfiddle.org/sample/3dt21m9/1-Combine-two-listbox-to-perform-both-single-multiple-select

Regards,
Ben

link publish delete flag offensive edit

answered 2012-12-13 23:21:46 +0800

RetoH gravatar image RetoH flag of Switzerland
44 5

updated 2012-12-14 01:01:21 +0800

I wanted to do exactly the same thing as abreodaniel: Multiple checked rows for deletion. Single selected row (blue) for detail display. The idea of benbai is interesting, but too hackish for my taste.

It would be very nice if Listbox would keep track of 2 different selection types. Here is my proposal:

1. "selected" rows (whole row is marked blue). With bindings for 'selectedItem' and 'selectedItems'. Toggle when user clicks anywhere on the row except checkbox.

2: "checked" rows (checkmark is checked). With bindings for 'checkedItem' and 'checkedItems'. Toggle when user clicks on checkbox.

Example usage (non-working code, just a proposal):

          <listbox model="@bind(vm.items)"
                   selectedItem="@bind(vm.selectedItem)" selectedItems="@bind(vm.selectedItems)" multiple="true"
                   checkedItem="@bind(vm.checkedItem)"   checkedItems="@bind(vm.checkedItems)"   multipleChecks="true">
          </listbox>

link publish delete flag offensive edit

answered 2012-12-14 08:42:34 +0800

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

updated 2012-12-14 09:04:23 +0800

Take an own additionally checkbox and not the 'inBuild' Checkmarks Checkboxes.

Only pieces of code for showing a way.

	private void createComponents(List<Email> list) {

. . .
		Listheader lh;
		Hbox hbox;
		Image img;

		lb = new Listbox();
		lb.setParent(plc);

		Listhead listhead = new Listhead();
		listhead.setParent(lb);

		// Delete marker Checkbox
		lh = new Listheader();
		lh.setWidth("55px");
		lh.setParent(listhead);
		hbox = new Hbox();
		hbox.setParent(lh);
		ckbDeleteAll = new Checkbox();
		ckbDeleteAll.setParent(hbox);
		ckbDeleteAll.setChecked(false);
		ckbDeleteAll.setStyle("padding-left: 2px; padding-right: 3px;");
		ckbDeleteAll.setTooltiptext(Labels.getLabel("common.MarkedAllForDeleting"));
		ckbDeleteAll.addEventListener("onCheck", new CheckAllListener());
		img = new Image();
		img.setSrc(IconHolder.ICON__TRASH_2_16x16);
		img.setParent(hbox);
 . . .

  . . .

			@Override
			public void render(Listitem item, Object data) throws Exception {

				Email obj = (Email) data;

				Listcell lc;
				Image img;
				Label lb;
				Checkbox cb;

				// Delete Checkbox
				lc = new Listcell();
				cb = new Checkbox();
				cb.setParent(lc);
				cb.setChecked(false);
				cb.setStyle("padding-left: 3px;");
				cb.setTooltiptext(Labels.getLabel("common.MarkedForDeleting"));

   . . .



	/**
	 * Inner Listener class.<br>
	 * onCheck for the 'mark all for deleting' Checkbox.
	 * 
	 * @author Stephan Gerth
	 */
	private final class CheckAllListener implements SerializableEventListener {
		private static final long serialVersionUID = 1L;

		@Override
		public void onEvent(Event event) throws Exception {

			Checkbox ckb = (Checkbox) event.getTarget();

			if (ckb.isChecked())
				checkAllItems(true);
			else
				checkAllItems(false);
		}
	}

	/**
	 * EN: Checks/unchecks all items as marked for deleting.<br>
	 * DE: Checked/unChecked alle Datensetze als zum loeschen markiert.<br>
	 */
	@SuppressWarnings("unchecked")
	public void checkAllItems(boolean checkAll) {

		List<Listitem> list = listbox.getItems();

		if (list.size() > 0) {
			for (Listitem li : list) {
				if (li.getFirstChild().getFirstChild() instanceof Checkbox) {
					Checkbox cb = (Checkbox) li.getFirstChild().getFirstChild();
					cb.setChecked(checkAll);
				}
			}
		}
	}

	/**
	 * EN: Deletes the object link records which checkbox is marked for delete.<br>
	 * DE: Loescht alle zum loeschen markierten Datensaetze.<br>
	 */
	@SuppressWarnings("unchecked")
	public void deleteMarkedItems() {

		List<Listitem> list = lb.getItems();

		if (list.size() > 0) {

			for (Listitem li : list) {
				if (li.getFirstChild().getFirstChild() instanceof Checkbox) {
					Checkbox cb = (Checkbox) li.getFirstChild().getFirstChild();
					if (cb.isChecked()) {
						Email entity = (Email) li.getValue();

						long id = entity.getId();

						MiscObjectLink obj;
						obj = getMyDBService().getMyOject(  id );

						/**
						 * delete the object
						 */
						if (obj != null) {
							getMyDBService().delete(obj);
					}
				}
			}
		}
	}

best
Stephan

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-11-07 17:20:34 +0800

Seen: 252 times

Last updated: Dec 14 '12

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