ComboBox with Multi Selection

[chenli868]

Hi, thanks for provide this widget. However, I find that it is not able to use the setSelection to check the item I want to check at initialization. Also, if I add a selectionChangedListener to the widget, it does not fire event if I check or uncheck items. Can anybody identify possible causes? I am using GXT 2.1.1.

[stiptkevin]

The setSelection is indeed not working correctly

[stiptkevin]

It seems that clearSelection() is also not working.

[micgala]

It seems the author is not working on that anymore.
If you need this feature and fix it, it would be very nice from you to post the fixed version here.

[diegolovison]

I update the source code

package abc.client.widget.form;

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

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.core.XTemplate;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DomEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.google.gwt.event.dom.client.KeyCodes;

public class XMultiComboBox<D extends ModelData> extends XComboBox<D> {

	private final String separator = ",";
	private final List<D> checkedValues = new ArrayList<D>();
	private final String propertyComparator;
	private final String checkBoxId = "checkbox-" + XDOM.getUniqueId();

	public XMultiComboBox(final String propertyComparator) {
		this.propertyComparator = propertyComparator;
		setUseQueryCache(false);
		setForceSelection(false);
		setTypeAhead(false);
	}

	@Override
	public void clear() {
		final CheckBoxListView<D> view = (CheckBoxListView<D>) getView();
		final List<D> list = view.getChecked();
		for (final D d : list) {
			view.setChecked(d, false);
		}
		checkedValues.clear();
		setRawValue(null);
		super.clear();
	}

	@Override
	protected PagingLoadConfig getParams(String query) {

		if (query != null && !query.isEmpty()) {

			if (query.endsWith(",")) {
				query = "";
			} else {

				final String array[] = query.split(separator);
				final int length = array.length;
				if (length > 0) {
					query = array[length - 1].trim();
				}
			}
		}

		return super.getParams(query);
	}

	@Override
	public List<D> getSelection() {
		return checkedValues;
	}

	@Override
	public D getValue() {
		return checkedValues.size() > 0 ? checkedValues.get(0) : null;
	}

	@Override
	protected void initList() {

		// template
		final String spacing = GXT.isIE && !GXT.isStrict ? "0" : "3";
		setTemplate(XTemplate.create("<tpl for=\".\"><div class=\"x-view-item x-view-item-check\"><table cellspacing='"
		    + spacing + "' cellpadding=0><tr><td><input id=\"" + checkBoxId
		    + "\" class=\"x-view-item-checkbox\" type=\"checkbox\" /></td><td><td>{" + getDisplayField()
		    + "}</td></tr></table></div></tpl>"));

		// view
		final CheckBoxListView<D> listView = new CheckBoxListView<D>();
		setView(listView);

		super.initList();

		listView.setSelectOnOver(false);
		listView.setItemSelector(getItemSelector() != null ? getItemSelector() : ".x-view-item");
		listView.setSelectStyle("");
	}

	@Override
	protected void onBlur(final ComponentEvent ce) {

		super.onBlur(ce);

		final String[] array = getRawValue().split(separator);
		final List<D> listToRemove = new ArrayList<D>();

		for (final D d : checkedValues) {

			boolean contain = false;

			for (final String str : array) {
				if (d.get(getDisplayField()).equals(str.trim())) {
					contain = true;
					break;
				}
			}

			if (!contain) {
				listToRemove.add(d);
			}
		}

		checkedValues.removeAll(listToRemove);

		updateText();

	}

	@Override
	protected void onKeyUp(final FieldEvent fe) {

		super.onKeyUp(fe);

		final int keyCode = fe.getKeyCode();
		if (keyCode == KeyCodes.KEY_DELETE || keyCode == KeyCodes.KEY_BACKSPACE) {
			clear();
		} else {

			final String rv = getRawValue();
			if (rv == null || rv.trim().isEmpty()) {
				clear();
			}
		}
	}

	@Override
	protected void onLoad(final StoreEvent<D> se) {

		super.onLoad(se);

		final List<D> list = store.getModels();
		if (list != null && !list.isEmpty()) {

			for (final D item : list) {
				for (final D selected : checkedValues) {
					if (item.get(propertyComparator).equals(selected.get(propertyComparator))) {
						((CheckBoxListView<D>) getView()).setChecked(item, true);
					}
				}
			}
		}
	}

	@Override
	protected void onSelect(final D model, final int index) {
		final FieldEvent fe = new FieldEvent(this);
		if (fireEvent(Events.BeforeSelect, fe)) {

			boolean contain = false;
			for (final D selected : checkedValues) {
				if (model.get(propertyComparator).equals(selected.get(propertyComparator))) {
					contain = true;
					checkedValues.remove(selected);
					break;
				}
			}

			if (!contain) {
				checkedValues.add(model);
			}

			setValue(model);

			updateText();

			fireEvent(Events.Select, fe);
		}
	}

	@Override
	protected void onViewClick(final DomEvent de, final boolean focus) {

		final String id = de.getTarget().getId();
		if (id != null && id.startsWith(checkBoxId)) {
			super.onViewClick(de, focus);
		}
	}

	@Override
	protected boolean selectByValue(final String value) {
		return true;
	}

	@Override
	public void setSelection(final List<D> selection) {

		clear();

		if (selection != null) {
			for (final D d : selection) {
				checkedValues.add(d);
			}
		}

		updateText();
	}

	@Override
	public void setValue(final D value) {
		// não faz nada ;)
	}

	private void updateText() {

		final StringBuilder sb = new StringBuilder();

		for (final D d : checkedValues) {
			if (sb.length() > 0) {
				sb.append(separator + " ");
			}

			sb.append(d.get(getDisplayField()));
		}

		setRawValue(sb.toString());
	}

}

[raj_s37]

please provide some examples / how to integrate the ComboBox with Multi Selection with in the editor grid

[prithvig]

hey, the XMultiComboBox extends MultiComboBox. which MultiComboBox are you extending? the one posted in the link or the original one or the one that is just before this? i tried using all three but neither of them work. in the one posted above this the only problem is in setting the values pre-rendering... has anyone found a good solution for this?