multiSelectListBox

multiSelectListBox allows users to select multiple values from a scrollable list of items using checkboxes.

XML Element

multiSelectListBox

Java Class

JmixMultiSelectListBox

Basics

LIVE DEMO

Use the itemsContainer or itemsEnum attribute to create a list of items:

XML
<vbox width="AUTO">
    <h4 text="Single-select ListBox"/>
    <listBox id="listBox"/>
</vbox>
<vbox width="AUTO">
    <h4 text="Multi-select ListBox"/>
    <multiSelectListBox id="multiSelectListBox"/>
</vbox>
Java
@ViewComponent
protected JmixListBox<String> listBox;
@ViewComponent
protected JmixMultiSelectListBox<String> multiSelectListBox;

@Subscribe
protected void onInit(InitEvent event) {
    List<String> items = List.of("CSS", "HTML", "Java", "JavaScript", "JSON", "Kotlin", "XML");
    listBox.setItems(items);
    multiSelectListBox.setItems(items);

    listBox.setValue("Java");
    multiSelectListBox.select("Java", "Kotlin");
}

Item Enabled Provider

itemEnabledProvider allows you to dynamically control the enabled state of individual items based on specific conditions. Disabled items appear grayed out and cannot be selected by the user. All items are enabled by default.

@Install(to = "multiSelectListBox", subject = "itemEnabledProvider")
private boolean multiSelectListBoxItemEnabledProvider(final User user) {
    if (user != null) {
        return user.getActive();
    }
    return true;
}

Customizing Item Labels

itemLabelGenerator allows you to customize how items are displayed in the multiSelectListBox component. This gives you control over the text that users see, enabling you to present information in a more user-friendly or context-specific manner.

@Install(to = "multiSelectListBox", subject = "itemLabelGenerator")
private String multiSelectListBoxItemLabelGenerator(final User item) {
    return metadataTools.format(item.getDisplayName()).toUpperCase();
}

Rendering Items

It is possible to customize the render of items. The renderer is applied to each item to create a component which represents the item.

You can use the setRenderer() method or the @Supply annotation for it.

@Supply(to = "mSelectListBox", subject = "renderer")
private ComponentRenderer<Span, User> mSelectListBoxRenderer() {
    return new ComponentRenderer<>(user -> {
        Span span = uiComponents.create(Span.class);
        span.setText(user.getDisplayName());
        span.setClassName("font-bold");
        return span;
    });
}

Alternatively, you can render items using a nested fragmentRenderer element. Refer to the Fragment Renderer section for more information.

Attributes

The following attributes are specific to multiSelectListBox:

Name Description Default

itemsContainer

Sets the items container.

—

itemsEnum

Sets the items enum.

—

The following shared attributes are supported by multiSelectListBox:

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - readOnly - visible - width

Handlers

The following handlers are specific to multiSelectListBox:

Name Description

itemEnabledProvider

itemEnabledProvider is applied to each item of this multiSelectListBox to determine whether the item should be enabled (true) or disabled (false). See Item Enabled Provider.

itemLabelGenerator

Allows you to customize the labels displayed for each item in multiSelectListBox. See Customizing Item Labels.

renderer

Sets the item renderer for this multiSelectListBox. See Rendering Items.

The following shared handlers are supported by multiSelectListBox:

AttachEvent - ComponentValueChangeEvent

Elements

A multiSelectListBox can include fragmentRenderer and tooltip as its nested elements.

See Also