How to filter an OptionGroup

Hi

I’d like to filter an optionGroup using a textField. So i tried to adapt the
InstantTextField
example replacing the table by an optionGroup. Here is the resulting code :

public class TextFieldTextChangeEventExample extends VerticalLayout {

	public TextFieldTextChangeEventExample() {
		final IndexedContainer nameContainer = new IndexedContainer(
				Arrays.asList("aaaaa", "bbbbb", "ccccc", "ddddd"));

		TextField filterField = new TextField("Filter");
		filterField.setTextChangeEventMode(TextChangeEventMode.LAZY);
		filterField.setTextChangeTimeout(200);
		filterField.addListener(new TextChangeListener() {

			public void textChange(TextChangeEvent event) {
				nameContainer.removeAllContainerFilters();
				nameContainer.addContainerFilter("property", event.getText(),
						true, false);
			}
		});

		OptionGroup optionGroup = new OptionGroup(null, nameContainer);

		setSpacing(false);
		addComponent(filterField);
		addComponent(optionGroup);

		filterField.setWidth("150px");
		optionGroup.setWidth("150px");
	}
}

But when I type for example “a” in the filterField all of the options of the Group disappear where the “aaaaa” option should stay.

So i wonder :

[list]

[]
Can an optionGroup be filtered ?
[
]
If so, how should i construct my IndexedContainer and what should i put as propertyId in the addContainerFilter method invoked on textChangeEvent ?

[/list]Can an optionGroup be filtered ?

Hi.

It is possible to filter an OptionGroup too.
In your example the problem is that the filter tries to filter by looking at the value in item property “property” which doesn’t exist and will thus not contain a value.

To get the example to work you should build the indexed container in the following way to get the filter to work:

	public static IndexedContainer getContainer() {
		final IndexedContainer contactContainer = new IndexedContainer();
		contactContainer.addContainerProperty(PROPERTY_NAME, String.class, "");

		final List<String> targets = Arrays.asList("aaaaa", "bbbbb", "ccccc", "ddddd");

		for (final String target : targets) {
			final Item item = contactContainer.addItem(target);
			item.getItemProperty(PROPERTY_NAME).setValue(target);
		}
		return contactContainer;
	}

where PROPERTY_NAME equals propertyId in addContainerFilter(…)
so in this case “property”

I did it like this

public class OptionGroupLayout extends VerticalLayout {
    private OptionGroup   opg;
    private TextField     txtSearch;
    private IndexedContainer container;
    
    @SuppressWarnings("unchecked")
    public OptionGroupLayout(List<String> options){
        container = new IndexedContainer();
        container.addContainerProperty("filterProperty", String.class, null);
        options.forEach(option -> {
            Item item = container.addItem(option);
            item.getItemProperty("filterProperty").setValue(option.toString());
        });

        txtSearch = new TextField();
        txtSearch.setInputPrompt("Buscar");
        txtSearch.setTextChangeEventMode(TextChangeEventMode.LAZY);
        txtSearch.setTextChangeTimeout(200);
        txtSearch.addTextChangeListener(event -> {
            container.removeAllContainerFilters();
            if(!event.getText().equals(""))     
                 container.addContainerFilter("filterProperty", event.getText(), true, false);
        });

        opg = new OptionGroup(null, container); 
        opg.setImmediate(true);
        opg.setMultiSelect(true);

        etc...
 
        this.addComponents(txtSearch, opg);